Блог

Главная - Вопросы по программированию - Тег условного стиля Vue в компоненте одного файла

Тег условного стиля Vue в компоненте одного файла

#css #vue.js #web-component

Вопрос:

Я начал разработку библиотеки веб-компонентов vue. Члены моей команды запросили возможность удаления стилей по умолчанию с помощью атрибута HTML в веб-компоненте. Я знаю, что мог бы использовать привязки классов CSS для элементов шаблона, однако мне было интересно, есть ли способ условно включить сам тег стиля, чтобы мне не нужно было изменять имена классов, чтобы включить базовые стили или нет.

Пример структуры компонента

 
    <template>
      <section class="default-class" />
    </template>
    
    <script>
    export default {
      props: {
        useDefault: Boolean
      }
    }
    </script>
    
    <style>
      // Default styles included here
      // Ideally the style tag or it's content could be included based off useDefault prop
    </style>

Потенциальная реализация

 
    <web-component use-default="false"></web-component>

Комментарии:

1. Нет. Вы не можете условно загрузить тег стиля в SFC.

2. Вы можете использовать эту новую функцию динамического CSS, управляемого состоянием .

3. Попробуйте сделать следующее: <раздел :класс=»по умолчанию-класс: по умолчанию» />

Ответ №1:

Как я прочитал ваш вопрос; вы хотите сохранить <style> влияние как на Глобальный ДОМ, так и на теневой дом

Один из способов-клонировать эти <style> элементы в ShadowDOM

Но, может ::parts быть, для вас это работает лучше; смотрите: https://meowni.ca/posts/part-theme-explainer/

 customElements.define("web-component", class extends HTMLElement {
  constructor() {
    super()
      .attachShadow({mode:"open"})
      .innerHTML = "<div>Inside Web Component</div>";
  }
  connectedCallback() {
    // get all styles from global DOM and clone them inside the Web Component
    let includeStyles = this.getAttribute("clone-styles");
    let globalStyles = document.querySelectorAll(`[${includeStyles}]`);
    let clonedStyles = [...globalStyles].map(style => style.cloneNode(true));
    this.shadowRoot.prepend(...clonedStyles);
  }
}); 
 <style mystyles>
  div {
    background: gold
  }
</style>
<style mystyles>
  div {
    color: blue
  }
</style>

<div>I am Global</div>
<web-component clone-styles="mystyles"></web-component>
Метки: