【Vue.js】styleタグにscopedを追加しているファイルの子コンポーネントファイルにもCSSが適用できる:deepセレクターについて解説します。

なやむくん

styleタグにscopedオプションが追加されているファイルの子コンポーネントファイルにもCSSを反映させたい…。

などの疑問や悩みを解決してまいります。

場合によってはscopedオプションが追加されているstyleタグ内でCSSを記述し、子コンポーネントファイルにもそのCSSを反映させたいなんてこともあるかと思います。

「子コンポーネントファイルにCSS書けばいいじゃん」との声も聞こえてきそうですが、例えばVuetifyやElement+のようなUIライブラリからコンポーネントを持ってくるときにオプションだけでは実現しきれないときはCSSを使用しますが、scopedがあると子コンポーネントに対してCSS指定することができないです。

こういう時に使用できるのが:deepセレクターです。

今回はこの:deepセレクターについて解説していきます。

:deepセレクターとは

冒頭でも軽く触れていますが、:deepセレクターはscopedが指定されているファイルの子コンポーネントファイルにもCSSを適用することができるようになります。

そもそもstyleタグにscopedオプションを追加すると、その中で記述したCSSはそのファイル内限定で使用することができ、その他ファイルには影響を及ぼさなくなります。

<style scoped>
div {
  width: 45%;
}
</style>

そこで:deepセレクターを追記することで、追加されたCSSは子コンポーネントにも適用されることになります。

<style scoped>
:deep(div) {
  width: 45%;
}
</style>

Vue.js3になってから書き方が変更になった

Vue.js2のときは上記で解説した記述方法ではなく、以下の書き方でした。

<style scoped>
::v-deep {
    div {
      width: 45%;
    }
  }
</style>

もえるくん

:deepではなく、::v-deepで{}で囲んで、その中にCSSを記述するような形だったんですね！

UIライブラリ使用時に活躍する

:deepセレクターはscopedが指定されていても、子コンポーネントにもそのCSSを反映することができるものと説明いたしました。

しかし、それなら子コンポーネントファイルに直接記述してしまえばわざわざ使用することもありません。

よく使われるのがVuetifyやElement+のようなUIライブラリです。

子コンポーネントファイルを用意することなくコンポーネントタグを記述したら表示させることができるため、直接子コンポーネントファイル記述することができません。

この持ってきたコンポーネントタグに対して、scopedが指定されているstyleタグ内にCSSを記述し、反映させたい場合に使用することが多くなるかと思います。