Можливості 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 залишається статичним. Настроювана властивість буде застосована до кореневого елемента компонента за допомогою вбудованих стилів і негайно оновлена, якщо вихідне значення зміниться.