Vue.js: SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法MEMO

Vue.js SFCでscoped cssを利用しているとdefaultでは以下の通りslotで挿入した要素にスタイルを当てることができません。

デフォルトでは、スコープ付きスタイルは親コンポーネントが所有するコンテンツとみなされ、でレンダリングされるコンテンツに影響を与えません。
SFC スタイルの機能 | Vue.js

こういう場合にどういう方法があるのかメモ📝

SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法

ディープセレクタを使う

:deepを使うとscoped cssで定義したスタイルを子要素にも伝搬させることができます。これはslotで挿入した要素にも反映されます。

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

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

https://v3.ja.vuejs.org/api/sfc-style.html#style-scoped

スロットセレクタを使う

前述の通りディープセレクタを使うとslotを挿入した要素含めた子要素に対してスタイルを当てることができます。 しかし、これはslotした要素に限らないので予想外の子要素にスタイルが当たる可能性があります。slotのみにスタイルを当てる場合には:slottedを使うほうが良さそうです。

スロットのコンテンツを明示的に対象にするには、:slotted 擬似クラスを使用できます

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

https://v3.ja.vuejs.org/api/sfc-style.html#スロットセレクタ

これはscoped cssとは別のdata-v-b001173a-sといったdata属性が設定され、別のスコープでslotのみにスタイルが当たるように管理されているようです。

おわりに

Vue SFC、スタイル周りも非常に高機能でガイドを一読しておくと良さそうですね📗

参考

v3.ja.vuejs.org