はじめに

だいたいの人が特別な理由がなければコンポーネント内のスタイル定義ってscopedで書いていると思います。今まではcssはグローバルにどんどん書いちゃえって思考だったので、このscopedを初めて見たときは目から鱗でした。でもいざ書き始めると意外と些細なところで引っかかったりするんですよね。今回は親から子、もしくは親から孫へのスタイル定義の話。

やりたいこと

<template>
  <Parent class=“Parent”>
    <Child class=“Child” />
  </Parent>
</template>

<style lang="scss" scoped>
  .Parent {
    .Child {
      // スタイル定義
    }
  }
</style>

ParentコンポーネントからChildコンポーネントのスタイルを定義したい！

deepセレクタで即解決

<style lang="scss" scoped>
  .Parent {
    >>> .Child {
      // スタイル定義
    }
  }
</style>

これでOKです。>>>(deepセレクタ)を使うんです。知っていれば即解決ですね。

deepセレクタが効かなーい！

はい、僕もそうでした。使っている環境によっては>>>がうまく解析出来ないみたいなんです。そんなときは>>>のエイリアスであるv-deepを使えばOKです。

<style lang="scss" scoped>
  .Parent {
    ::v-deep .Child {
      // スタイル定義
    }
  }
</style>

/deep/なんてのもありますよ

廃止予定の書き方に/deep/なんてのもあります。先ほどの::v-deepの部分を/deep/に入れ換えても動作するかと思います。が、使用しないでください。さきほども言いましたが廃止予定なんです。Chromeなんかでもコンソールで怒られます。まだWarningですが。

さいごに

やっぱりscopedってすごく良い。ちょっとスタイルを変えたら全然違う画面のレイアウトが崩れてしまった経験がある人はきっと一人や二人じゃないはず。BEMとかに頼ったり、力技で切り抜けて来たのが今じゃscopedですからね。素敵な時代になりましたね。それじゃ、今回はこの辺で。