scoped-css.md

スコープ付き 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>

注意

1. 同じコンポーネント内にスコープで区切られてものとそうでないスタイルを含むことが出来ます：

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

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

2. 子コンポーネントのルートノードは親のスコープの CSS と子のスコープの CSS の両方の影響をうけます。

3. パーシャルはスコープ付きスタイルの影響をうけません。

4. スコープされたスタイルは class の必要性を排除しません。ブラウザが様々な CSS セレクタをレンダリングするため、p { color: red } はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし .example { color: red } のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。この例で違いをテストすることが出来ます。

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

6. scoped スタイルで入れ子のセレクタが必要なら、CSS に対して >>> オペレータを、そして scss に対しては /deep/ を使用する必要があります:

   <style scoped>
   .a >>> .b {
   
   }
   </style>
   
   <style lang="scss" scoped>
   .a /deep/ .b {
   
   }
   </style>