Можливості CSS одно-файлових компонент ​

Область CSS ​

Якщо тег <style> має атрибут scoped, його CSS застосовуватиметься лише до елементів поточного компонента. Це схоже на інкапсуляцію стилю в Shadow DOM. Він поставляється з деякими застереженнями, але не вимагає жодних поліфілів. Це досягається за допомогою PostCSS для перетворення наступного:

<style scoped> .example {   color: red; } </style>  <template>   <div class="example">hi</div> </template>

У наступне:

<style> .example[data-v-f3f3eg9] {   color: red; } </style>  <template>   <div class="example" data-v-f3f3eg9>hi</div> </template>

Кореневі елементи дочірнього компонента ​

З scoped стилі батьківського компонента не потраплять у дочірні компоненти. Однак на кореневий вузол дочірнього компонента впливатимуть CSS як батьківського, так і дочірнього CSS. Це призначено для того, щоб батьківський елемент міг стилізувати дочірній кореневий елемент для цілей макета.

Глибокі селектори ​

Якщо ви хочете, щоб селектор у стилях scoped був «глибоким», тобто впливав на дочірні компоненти, ви можете використати псевдоклас :deep():

<style scoped> .a :deep(.b) {   /* ... */ } </style>

Вищезазначене буде скомпільовано в:

.a[data-v-f3f3eg9] .b {   /* ... */ }

Селектори слотів ​

За промовчанням стилі з обмеженою областю не впливають на вміст, відтворений <slot/>, оскільки вони вважаються належними батьківському компоненту, який їх передає. Щоб явно націлити вміст слота, використовуйте псевдоклас :slotted:

<style scoped> :slotted(div) {   color: red; } </style>

Глобальні селектори ​

Якщо ви хочете, щоб лише одне правило застосовувалося глобально, ви можете використовувати псевдоклас :global замість створення іншого <style> (див. нижче):

<style scoped> :global(.red) {   color: red; } </style>

Поєднання локальних та глобальних стилів ​

Ви також можете включити в той самий компонент як стилі з областю, так і без неї:

<style> /* глобальні стилі */ </style>  <style scoped> /* локальні стилі */ </style>

Поради щодо використання стилів з обмеженою областю ​

• Стилі з областю видимості не усувають потреби в класах. Через те, як браузери рендерять різні селектори CSS, p { color: red } буде працювати набагато повільніше при використанні scoped (тобто у поєднанні з селектором атрибутів). Якщо натомість ви використовуєте класи чи ідентифікатори, як-от у .example {color: red }, то ви практично усуваєте цю втрату продуктивності.

• Будьте обережні з селекторами-нащадками в рекурсивних компонентах! Для правила CSS із селектором .a .b, якщо елемент, який відповідає .a, містить рекурсивний дочірній компонент, тоді всі .b у цьому дочірньому компоненті відповідатимуть правилу.

CSS Модулі ​

Тег <style module> скомпільовано як модулі CSS і надає отримані класи CSS компоненту як об’єкт під ключем $style:

<template>   <p :class="$style.red">Це повинно бути червоним</p> </template>  <style module> .red {   color: red; } </style>

Отримані класи хешуються, щоб уникнути колізій, досягаючи такого ж ефекту, коли CSS охоплює лише поточний компонент.

Зверніться до специфікацій модулів CSS, щоб отримати додаткові відомості, наприклад глобальні винятки й композиція.

Впровадження користувацького імені ​

Можна налаштувати ключ властивості об'єкта з класами, що впроваджуються, вказавши значення атрибуту module:

<template>   <p :class="classes.red">червоний</p> </template>  <style module="classes"> .red {   color: red; } </style>

Використання з композиційним API ​

Класи, що впроваджуються, доступні в setup() і <script setup> через API useCssModule. Для секцій <style module> з користувацьким іменем, useCssModule приймає в якості першого аргументу відповідне значення атрибуту module як перший аргумент:

import { useCssModule } from 'vue'  // всередині setup() scope... // за промовчанням, повертає класи для <style module> useCssModule()  // при вказівці імені, повертає класи для <style module="classes"> useCssModule('classes')

v-bind() in CSS ​

Теги одно-файлового компонента <style> підтримують зв'язування значень CSS зі станом динамічного компонента за допомогою функції CSS v-bind:

<template>   <div class="text">привіт</div> </template>  <script> export default {   data() {     return {       color: 'red'     }   } } </script>  <style> .text {   color: v-bind(color); } </style>

Синтаксис працює з <script setup> і підтримує вирази JavaScript (має бути взято в лапки):

<script setup> const theme = {   color: 'red' } </script>  <template>   <p>привіт</p> </template>  <style scoped> p {   color: v-bind('theme.color'); } </style>

Фактичне значення буде скомпільовано в хешовану спеціальну властивість CSS, тому CSS залишається статичним. Настроювана властивість буде застосована до кореневого елемента компонента за допомогою вбудованих стилів і негайно оновлена, якщо вихідне значення зміниться.