子コンポーネントや、v-htmlで生成された要素にもスタイルを適用する方法[Vue.js] :2ページ目

結論から。「:deep」を使用すると、scopedされたstyle指定の中からも、子コンポーネントにも適用されるスタイルを記述できる

Vue.jsの単一コンポーネント内で、styleタグにscoped属性がついている場合、「そのコンポーネントにのみ」スタイルが適用されます。

そのルール下で、「子コンポーネント」にもスタイルを適用したい場合、次のように書きます。

[子コンポーネントにもstyleを効かせたい場合]

<style scoped>
:deep(.myclass) {
  font-size: 3rem;
}
</style>

↑このようにすると、scoped状態では通常は効かないスタイルを、
子コンポーネントにも効かせることが可能になります。
※案件によっては、旧バージョンの Vue.js を使用している場合もあることかと思います。
上記の書き方が効かない場合、以前のバージョンの記法で
/deep/ .myclass { font-size: 3rem; }
のように、 :deep() の代わりに /deep/ class名 の形で書くと効く可能性があります。

v-htmlで生成されたコンテンツにスタイル適用する場合にも使える

v-htmlを通して生成されたコンテンツが持っている、dataの値の中にある class には、
スタイルを適用しようとしても、普通に書いただけではスタイルが効きません。

これに対しても、:deep を使うことで、スタイルを適用することが可能です。
どう言うことかと言うと、次のようなことです。

例えば、表示したいdataの中身がhtmlタグを含むもので、
それを v-html を使って、ユーザーにはhtmlとして見てもらいたい場合。

次のようなdataがあったとして、

posts: [
  { 
    id: 1,
    mytitle: 'Vue.jsをつかってみる',
    mycontent: '双方向の<span class="myclass">データバインディング</span>'
  },
  { 
    id: 2,
    mytitle: 'WordPressをつかってみる',
    mycontent: 'この<span class="myclass">WordPress</span>というのは、'
  },
...(中略)...

template側は、例えば次のように書くと思います。
5行目の v-html で、htmlタグを含む data を html として展開しています。

<div v-for="item in mydata.posts" :key="item.id">
  <h2>
    {{item.mytitle}}
  </h2>
  <p v-html="item.mycontent"></p>
</div>

ただしこのように v-html で展開した data の中にある class にスタイルを当てたい場合、
通常の記法ではスタイルを当てることができません。
この例で言うと、
5行目のv-htmlで展開している item.mycontent が持っている、 myclass に対してスタイルを当てたい場合を想定しています。

で、どうするかと言うと、次のように書き換えるわけですね。上のセクションの例とまったく同じく、:deep を使用します。

<style scoped>
:deep(.myclass) {
  font-size: 3rem;
}
</style>

↑このように :deep を使用してあげると
v-htmlをつかって生成されたコンテンツにも、しっかりスタイルを適用することが可能になります。
※案件によっては、旧バージョンの Vue.js を使用している場合もあることかと思います。
上記の書き方が効かない場合、以前のバージョンの記法で
/deep/ .myclass { font-size: 3rem; }
のように、 :deep() の代わりに /deep/ class名 の形で書くと効く可能性があります。