[Vue/Nuxt]v-htmlで出力されたhtmlタグにスタイルを当てる方法

Question

※XSS対策はしてあるとします

vue(nuxt)上で<span class="hoge">hogehoge</span>のような文字列をspanタグを機能させた上で表示したい場合、v-htmlを使用して表示すると思います。

ただv-htmlを使用して表示した場合、spanタグとしては機能するのですが、なぜか.hogeクラスが反応しない(.hogeに当てたスタイルが効かない)のですが、v-htmlで表示したタグにスタイルを当てることは不可能なのでしょうか、、？
もしご存知の方がいらっしゃいましたら教えていただきたいです????‍♀️

Answer 1

single file component + scoped cssの環境という前提ですが、ディープセレクタを使って適用することができるかと思います。

ドキュメントは以下にあります。
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

また、googleで検索すると以下の記事が見つかりました。
https://qiita.com/tscp/items/50b91ec583ae80aebac0

Comments

[退会済みユーザー]

まさにこれでした！！ありがとうございます！