v-htmlでレンダリングする要素をScoped cssでスタイリングするときの注意点

Nuxt.jsにおいて単一ファイルコンポーネントでテンプレートを作成していたのですが、v-htmlでレンダリングした要素のスタイルがうまく効かないという問題が発生しました

先に原因を書いておくと、その単一ファイルコンポーネント内のstyleはすべてScopedでローカルなスタイルとして書いていたのですが、その書き方に問題がありました

ちょっと調べると原因と解決策はわかったのですが、地味に最初は引っかかりそうなポイントだなと思ったのでまとめておきます。

【前提】Scoped cssで書かれたスタイルはユニークな属性に対して指定される

まず、大前提としてScoped cssで書かれたスタイルは、以下のようにユニークな属性に対するスタイルとして指定されます。

これが

こうなる。

さらに、Scoped cssで書かれたスタイルはv-htmlでレンダリングされた要素にスタイルを適用しません。以下、公式ドキュメントからの引用です。

v-html によって作成された DOM コンテンツは、スコープ付きスタイルにの影響を受けませんが、ディープセレクタを使用してスタイルを設定することはできます。

なので、普通にスタイルを書いても正しく属性が指定できず、望んだ結果は得られません。理由としては、v-htmlでレンダリングする際、Vueのテンプレートコンパイラでは処理されないからなんだそう。

【解決策】Scoped cssのなかでディープセレクタを使う

でも、v-htmlでレンダリングした要素に、Scoped cssをあてたいときはあると思います。API経由で渡されたデータを表示したいときなどです。

じゃあ、どうやってv-htmlでレンダリングした要素にScoped cssを当てるかというと、手っ取り早いのはディープでセレクタを使う方法です。

このようにディープセレクタを使用することで、以下のようにコンパイルされます。

ということで、v-htmlでレンダリングした要素に対してうまくスタイルが効かない場合、Scoped css内でのスタイルの指定の方法に注意してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)