🐈

【Vue3.0】Scoped CSSが改善された話

2 min read 10

更新内容

https://github.com/vuejs/rfcs/pull/119

ScopedCSSの改善

以下のissueで議論されている下記の問題がこの更新で改善されました。

https://github.com/vuejs/vue/issues/11245#issuecomment-604150460

詳細はコメント欄にて記載して議論しています。

scoped によって、親コンポーネントのスタイルは子コンポーネントに漏れません。ただし、子コンポーネントのルートノードは親スコープの CSS と子スコープの CSS と両方によって影響を受けます。これは、設計上、親はレイアウトが目的で子のルート要素をスタイルすることができます。
https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html

以下議論の通りで、対応はされておらず当該issueのclose自体が不適切の可能性があるため訂正しました。
https://zenn.dev/karan_coron/articles/87597250de406018e351#comment-ed3a4a32ad03e3351752

上記、対応されているとの報告があったため、一旦保留にします。

v-slot, ::v-deep, scopedのスタイリング記述方法の改善

ScopedCSSの記述方法が改善されます。
ディープセレクタの記述方法は従来、以下の記述でしたが、

<style>
  .a ::v-deep b ...
  .a >>> b ...
  .a /deep/ b ...
</style>

または、

<style scoped>
  .a ::v-deep b ...
  .a >>> b ...
  .a /deep/ b ...
</style>

以下のような記述ができて、v-slot, ::v-deep, scopedの記述がより直感的にスタイリングできるようになりました。

<style> <!-- global -->
  /* deep selectors */
  .a ::v-deep(.b) ...

  /* slot */
  .a ::v-slotted(.b) ...

  /* global */
  .a ::v-global(.b) ...
</style>

<style scoped> <!-- scoped -->
</style>

<style deep> <!-- ::v-deep -->
</style>

<style slotted> <!-- ::v-slotted -->
</style>

おわりに

何か間違えや質問などあればコメントお願いします。