こちらの記事では、Vue.jsのv-htmlで生成されたコンテンツに対してスコープのスタイルを当てる方法について解説しています。
v-htmlで生成されたコンテンツに対して、スタイルを当てる場合は普段通りのやり方とは異なり少し工夫する必要があります。
- Vue.jsを初歩から実践まで徹底的に解説
- Javascript初心者でも分かりやすい
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
v-htmlにはスコープのスタイルが反映されない
v-htmlを使って描画されたデータに対して、グローバルなスタイルは適用することができますが、スコープで設定されているスタイル適用されません。
Vue.jsを始めて多くの人が躓くポイントだと思います。では、何故スコープで設定されているスタイルが適用されないのか見ていきましょう。
先輩くんv-htmlについて知りたい方は下記の記事をご覧ください！
v-htmlでスコープのスタイルが反映されない理由
<style>にscopedを付けることによって、Vue.js側でHTMLのコンポーネント毎にカスタムデータを付与させます。CSSに対してもHTMLで付与させたカスタムデータを付与させることで、コンポーネント毎によるスタイルの管理をしています。
このカスタムデータがv-htmlで生成された動的コンテンツには付与されないため、スコープで設定されているスタイルが適用されない原因です。
<style>
span {
color: red;
}
</style>
<style scoped>
span[data-v-7ba5bd90] {
color: red;
}
</style>deepを使って解決
v-htmlで生成されたコンテンツはscopedに書かれているスタイルを当てることは不可能なの？と思うかも知れませんが、deep(ディープセレクタ)を使うことで解決できます。
親コンポーネントで使っているスタイルを子コンポーネントにも適用させたい場合にdeppを使うことで、子コンポーネントにもスタイルを適用させることができるようになります。
deepの書き方は「>>>」「/deep/」の2通りあるので、自分が使いやす方を選びましょう。
<style scoped>
/deep/ .c-red {
color: red;
}
>>> .c-red {
color: red;
}
</style>まとめ
今回はVue.jsのv-htmlにスコープのスタイルを当てる方法についてご紹介しました。最後にポイントを軽くおさらいしましょう。
- scopedで指定しているスタイルが適用されない
- deepでスタイルを適用させることができる