3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【Vue】Vue3でScopedCSSが改善されるという話

更新内容

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

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

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

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

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

style3.vue
<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>

おわりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?