スコープ付き CSS

再帰されたコンポーネントの子孫セレクタには気をつけてください！ セレクタ .a .b を持つ CSS ルールの場合、.a にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての .b はルールにマッチします。# スコープ付き CSS

scoped 属性をもつ <style> タグを利用するとき、その CSS は現在のコンポーネントの要素にのみ適用されます。これは Shadow DOM のスタイルのカプセル化に似ています。いくつか注意点がありますが、polyfill は必要ありません。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>

秘訣

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

同じコンポーネントでスコープ付き、そして非スコープ付きスタイル両方を含むことができます:

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

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

子コンポーネントのルート要素

scoped によって、親コンポーネントのスタイルは子コンポーネントに漏れません。ただし、子コンポーネントのルートノードは親スコープの CSS と子スコープの CSS と両方によって影響を受けます。これは、設計上、親はレイアウトが目的で子のルート要素をスタイルすることができます。

ディープセレクタ

scoped スタイルのセレクタを "deep" にしたい、つまり子コンポーネントに及ぼしたい場合は、>>> コンビネータを使用することができます:

<style scoped>
.a >>> .b { /* ... */ }
</style>

上記は以下にコンパイルされます:

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

SASS のようないくつかのプリプロセッサは、>>> を適切に解析できないかもしれません。そのようなケースでは /deep/ コンビネータを代わりに使用することができます。それは、>>> のエイリアスで、全く同じような動作します。

動的に生成されるコンテンツ

v-html によって作成された DOM コンテンツは、スコープ付きスタイルにの影響を受けませんが、ディープセレクタを使用してスタイルを設定することはできます。

留意すること

• スコープ付きスタイルでは class は必要です。 ブラウザが様々な CSS セレクタを描画するため、p { color: red } はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし .example { color: red } のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。この例で違いをテストすることが出来ます。
• 再帰されたコンポーネントの子孫セレクタには気をつけてください！ セレクタ .a .b を持つ CSS ルールの場合、.a にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての .b はルールにマッチします。