More than 3 years have passed since last update.

Vue.jsでのdeep selectorの書き方

Posted at 2020-02-11

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

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を試してください。