Vue.jsでのdeep selectorの書き方


久しぶりの投稿です。
備忘を兼ねて簡単に書きます。

deep selector?

Vue.js でscoped付でstyle を書いている場合に、そのコンポーネントの子コンポーネントにもstyleを追加したい場合に使用するcss のセレクターの書き方です。

書き方

.hoge >>> .huga{...}

>>>または/deep/で出来るとなっています。
(参考:https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html)

が、効かない場合がある。その時は?

原因を調べていないのですが、Versionか構成かで上記の書き方だと効かない場合があります。
調べてみたところ、次の書き方だと意図したとおりになりました。

.hoge ::v-deep .huga{...}

どうも、>>>/deep/が解釈されなかったようです。
もしdeep selectorが解釈されていない場合があったら、::v-deepを試してください。

参考

Deep Selectors
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Vue LoaderのDeep Selectorの::v-deep
https://blog.mahoroi.com/posts/2019/03/scoped-css-v-deep/

スコープ付き CSS
https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html