说说 Vue 中 CSS scoped 的原理？

在 Vue 中，使用 scoped 关键字为 <style> 标签加作用域，可以让样式仅作用于当前组件，避免样式污染。这在大型项目或组件库开发中非常实用。

scoped 本质是 Vue 编译时通过给 HTML 和 CSS 添加一个独特的 data-xxx 属性，从而实现样式"仅本组件生效"。

示例 🧪

带scoped的组件样式

<template>
  <div class="box">Hello</div>
</template>

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

编译后的 DOM 会变成 👇：

<div class="box" data-v-123abc>Hello</div>

对应的 CSS 变成：

.box[data-v-123abc] {
  color: red;
}

data-v-123abc 就是 Vue 自动生成的作用域属性。浏览器渲染时这个选择器只会选中本组件中的元素。

伪类和组合选择器

原始写法：

.button:hover {
  background: blue;
}

编译后：

.button[data-v-abc123]:hover {
  background: blue;
}

原理解析 🔍

1.模板编译阶段： Vue 会在每个元素上添加一个作用域属性（如 data-v-xxxxxx）。

2.样式处理阶段： Vue 会将 style scoped 中所有的选择器都加上[data-v-xxxxxx]后缀。

3.最终： 这样最终的 CSS 是"命中目标组件内部元素"的，其他组件即便也有 .box，由于没有 data-v-xxxxxx 属性，不会生效。

注意点 🚧

• scoped 不会影响子组件样式（即不会向下传递）；
• scoped 不会作用于 <style lang="scss"> 中嵌套的全局样式变量，除非你加 :global；
• 动态添加的 DOM 不会自动带上 data-v-xxx，需使用模板渲染。

🧰 扩展用法

全局样式怎么办？🌐

<style>
/* 不加 scoped，就是全局样式 */
body {
  background: #f5f5f5;
}
</style>

在 scoped 中写全局样式 🌍

:global(.el-button) {
  margin: 0;
}