在 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;
}
