SFC 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 の両方の影響を受けることになります。これは、親コンポーネントがレイアウトのために子コンポーネントのルート要素のスタイルを設定できるようにするための設計です。

deep セレクター ​

scoped スタイルのセレクターを "deep" にしたい場合、つまり子コンポーネントに影響を与えたい場合は、:deep() 擬似クラスを使用できます:

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

上記は次のようにコンパイルされます:

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

slotted セレクター ​

<slot/> によってレンダリングされるコンテンツは、デフォルトでは親コンポーネントによって所有されていると見なされるため、スコープ付きスタイルの影響を受けません。明示的にスロットのコンテンツをターゲットにするには、:slotted 疑似クラスを使用します:

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

global セレクター ​

もし 1 つのルールだけをグローバルに適用したい場合は、別の <style> を作成するかわりに、:global 疑似クラスを使用できます（以下を参照）:

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

ローカルスタイルとグローバルスタイルの混在 ​

スコープ付きスタイルとスコープなしスタイルの両方を同じコンポーネントに含めることもできます:

<style>
/* グローバルスタイル */
</style>

<style scoped>
/* ローカルスタイル */
</style>

スコープ付きスタイルのヒント ​

• スコープ付きスタイルでクラスが不要になるわけではありません。ブラウザーの様々な CSS セレクターのレンダリング方法により、p { color: red } をスコープ付きにした場合（つまり属性セレクターと組み合わせた場合）、何倍も遅くなります。その代わり、.example { color: red } のようにクラスや ID を使用すれば、このパフォーマンス低下をほぼ排除できます。

• 再帰的コンポーネントでの子孫セレクターに注意！ .a .b というセレクターがある CSS ルールにおいて、.a にマッチする要素が再帰的な子コンポーネントを含む場合、その子コンポーネントのすべての .b がルールにマッチされます。

CSS モジュール ​

<style module> タグは CSS モジュールとしてコンパイルされ、結果として得られる CSS クラスを $style というキーの下にオブジェクトとしてコンポーネントに公開します:

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

生成されたクラスは衝突を避けるためにハッシュ化され、CSS を現在のコンポーネントのみにスコープするのと同じ効果を得ることができます。

グローバルの例外やコンポジションなどの詳細は、CSS モジュールの仕様を参照してください。

カスタム注入名 ​

module 属性に値を与えることで、注入されるクラスオブジェクトのプロパティキーをカスタマイズできます:

<template>
  <p :class="classes.red">red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

Composition API での使用 ​

注入されたクラスは、useCssModule API を介して setup() や <script setup> の中でアクセスできます。カスタム注入名を持つ <style module> ブロックの場合、useCssModule は最初の引数としてマッチする module 属性の値を受け取ります:

import { useCssModule } from 'vue'

// setup() スコープの内側...
// デフォルトでは <style module> のクラスを返します
useCssModule()

// 名前付きの例、<style module="classes"> のクラスを返します
useCssModule('classes')

• 例

<script setup lang="ts">
import { useCssModule } from 'vue'

const classes = useCssModule()
</script>

<template>
  <p :class="classes.red">red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

CSS の v-bind() ​

SFC の <style> タグでは v-bind という CSS 関数を使用して、CSS の値をコンポーネントの動的な状態にリンクすることをサポートします:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

この構文は <script setup> で動作し、JavaScript の式（引用符で囲む必要あり）をサポートします:

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

実際の値は、ハッシュ化された CSS カスタムプロパティにコンパイルされるため、CSS は静的なままです。カスタムプロパティは、インラインスタイルによってコンポーネントのルート要素に適用され、ソース値が変更されるとリアクティブに更新されます。