Vue Scope CSS原理 简单介绍

1，表现

在 Vue 单文件组件中，当 <style> 标签带有 scoped 属性时，它的 CSS 只会影响当前组件的元素。

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">下雪天的夏风</div>
</template>

转换为

<style>
.example[data-v-95dc47c1] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-95dc47c1>下雪天的夏风</div>
</template>

2，原理

1. 通过 vue-loader 解析组件，提取出template、script、style 对应的代码块。

2. 构造出组件实例，在实例的选项上绑定 __scopeId。

3. 通过 PostCSS 将 CSS 进行编译转换，使用 __scopeId 生成属性选择器。
4. 而HTML标签上的 __scopeId 属性是在在 VNode 渲染为真实DOM 的过程中添加的。

VNode --> 真实DOM，会调用 setScope 方法应用 __scopeId 在 DOM 上生成 data-v-xxx 的属性。

3，样式穿透

一般为了修改引入的第三方库的样式。

3.1，深度选择器

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

转换为

.a[data-v-f3f3eg9] .b {
  /* ... */
}

3.2，全局选择器

如果想将样式应用到全局，除了另外创建一个<style>之外，也可以使用 :global 伪类来实现

<style scoped>
:global(.red) {
  color: red;
}
</style>

以上。

---

参考

Vue3 单文件组件 CSS 功能

五柳 scope实现原理