🔖

v-htmlで出力したリッチエディタ内のpタグにスタイルが当たらない!と思った時のメモ

2023/06/15に公開

結論

v-html で出力されたDOMコンテンツは、scoped されたCSSの影響を受けない。

DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.
https://vue-loader.vuejs.org/guide/scoped-css.html#dynamically-generated-content

どうするか

リッチエディタ内へのスタイリングは、scoped 外に記述するか、&::v-deep(Deep Selectors ディープセレクタ)を使うことでスタイリングする。

https://tedate.jp/vue-js/use-deep-pseudo-class-to-apply-the-style-in-vue/2

Discussion