CSS с ограниченной областью действия
Если style тег имеет scoped атрибут, его CSS будет применяться только к элементам текущего компонента. Это похоже на инкапсуляцию стилей в Shadow DOM. Он имеет некоторые оговорки, но не требует каких-либо полифилов. Это достигается за счет использования PostCSS для преобразования
В следующее:
# Корневые элементы дочернего компонента
При использовании scoped стили родительского компонента не будут проникать в дочерние компоненты. Однако на корневой узел дочернего компонента будет влиять как CSS родительского компонента, так и CSS дочернего компонента. Это сделано специально, чтобы родительский элемент мог стилизовать дочерний корневой элемент для целей макета.
# Глубокие селекторы
Если вы хотите, чтобы селектор в scoped стилях был «глубоким», т.е. влияющим на дочерние компоненты, вы можете использовать псевдокласс :deep()
Вышеупомянутое будет скомпилировано в:
Обратите внимание
На контент DOM, созданный с помощью v-htmlстилей с заданной областью действия, не влияют стили, но вы все равно можете стилизовать его с помощью глубоких селекторов
# Slotted Selectors
По умолчанию стили с областью действия не влияют на содержимое, отображаемое с помощью slot, поскольку они считаются принадлежащими родительскому компоненту, передающему их. Чтобы явно указать содержимое слота, используйте псевдокласс :slotted
# Глобальные селекторы
Если вы хотите, чтобы только одно правило применялось глобально, вы можете использовать псевдокласс :global вместо создания другого style
# Смешение локальных и глобальных стилей
Вы также можете включить стили как с областью действия, так и без области действия в один и тот же компонент
Советы по стилю с ограниченной областью действия
- Стили с ограниченной областью действия не устраняют необходимости в классах . Из-за того, как браузеры отображают различные селекторы CSS, p { color: red } они будут работать во много раз медленнее при ограничении области действия (т. е. в сочетании с селектором атрибутов). Если вместо этого вы используете классы или идентификаторы, например, в .example { color: red }, вы практически исключаете снижение производительности.
- Будьте осторожны с селекторами потомков в рекурсивных компонентах! Для правила CSS с селектором .a .b, если соответствующий элемент .a содержит рекурсивный дочерний компонент, то все .b в этом дочернем компоненте будет соответствовать правилу.
CSS-модули
Тег style module компилируется как модули CSS и предоставляет результирующие классы CSS компоненту как объект под ключом $style
Полученные классы хешируются, чтобы избежать коллизий, достигая того же эффекта, ограничивая CSS только текущим компонентом.
Пользовательское имя для инъекции
Вы можете настроить ключ свойства объекта внедренных классов, присвоив атрибуту module значение
Использование с API композиции
Доступ к внедренным классам можно получить setup()через script setup API useCssModule. Для style module блоков с пользовательскими именами внедрения useCssModule принимает соответствующее module значение атрибута в качестве первого аргумента:
# v-bind() в CSS
Теги SFC styleподдерживают связывание значений CSS с состоянием динамического компонента с помощью v-bind функции CSS
Синтаксис работает с script setup и поддерживает выражения JavaScript (должны быть заключены в кавычки):
Фактическое значение будет скомпилировано в хешированное пользовательское свойство CSS, поэтому CSS остается статическим. Пользовательское свойство будет применено к корневому элементу компонента с помощью встроенных стилей и автоматически обновлено, если исходное значение изменится.