Vue.js

【Vue.js】v-htmlにスコープのスタイルを当てる方法

こちらの記事では、Vue.jsのv-htmlで生成されたコンテンツに対してスコープのスタイルを当てる方法について解説しています。

v-htmlで生成されたコンテンツに対して、スタイルを当てる場合は普段通りのやり方とは異なり少し工夫する必要があります。

Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで

本書情報
著者川口 和也
発売日2018/9/22
ページ数893ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
はじめてのVue.js 3 入門!
導入からアプリケーション開発まで体系的に学ぶ

動画情報
作成者中村 裕太
学習時間5時間
受講者数12,910人
レビュー (2,509件)
動画の詳細はこちら

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(ディープセレクタ)を使うことで解決できます。

deepとは

親コンポーネントで使っているスタイルを子コンポーネントにも適用させたい場合にdeppを使うことで、子コンポーネントにもスタイルを適用させることができるようになります

deepの書き方は「>>>」「/deep/」の2通りあるので、自分が使いやす方を選びましょう。
<style scoped>
/deep/ .c-red {
  color: red;
}

>>> .c-red {
  color: red;
}
</style>

まとめ

今回はVue.jsのv-htmlにスコープのスタイルを当てる方法についてご紹介しました。
最後にポイントを軽くおさらいしましょう。

ポイント

  • scopedで指定しているスタイルが適用されない
  • deepでスタイルを適用させることができる

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村