^{作成日：2023/10/26}

Vueのstyle scopedの仕組みについて

Vue

CSS

Vue には Scoped CSS というコンポーネント固有のスタイリングを行うための機能があります。 これにより、他のコンポーネントやグローバルなスタイルに影響を与えずに、 特定のコンポーネント内でのみ適用されるスタイルを定義できます。

この記事では、Vue の Scoped CSS の概要とそれがどのように実現されているかについて書いています。

Scoped CSS とは

Vue3 の Composition API では次のように Scoped CSS を書くことができます。

<template>
  <div>
    <p>This is a scoped style component.</p>
  </div>
</template>

<style scoped>
p {
  color: red;
}
</style>

vue ファイル内でstyleタグにscopedをつけることで、コンポーネント固有のスタイルとなります。 そのため、他のコンポーネントや HTML のスタイルに影響を与えないので、スタイルの競合や衝突を減少させ、 保守性を向上させることができます。

どのように実現されているのか？

Vue のドキュメントによると、 HTML のdata属性と CSS の属性セレクターを使って実現されています。さきほどのコードは次のように変換されます。

<template>
  <div>
    <p data-v-f3f3eg9>This is a scoped style component.</p>
  </div>
</template>

<style>
p[data-v-f3f3eg9] {
  color: red;
}
</style>

• 3 行目：pタグに一意のデータ属性（ここではdata-v-f3f3eg9）が設定されます。
• 7 行目：<style scoped>は<style>タグに変換されます。
• 8 行目：pタグに属性セレクターに一意のデータ属性（data-v-f3f3eg9）が使われます。 []は属性セレクターで、 data-v-f3f3eg9の属性を持つpタグという意味になります。

コンポーネント固有のスタイリングは便利ですが、 属性セレクターを使うことでコンポーネント固有のスタイリングを可能にしているため、 処理速度が何倍も遅くなるというデメリットもあるようです。

まとめ

• Vue の Scoped CSS は HTML 要素にコンポーネント固有のdata属性を割り当て、CSS の属性セレクターを利用することで コンポーネント固有のスタイリングを実現している。
• ただし、データ属性セレクターは単純なクラスや ID セレクターに比べて遅いので、処理速度を重視する開発では注意する。