vue的scoped样式是编译期静态隔离机制，通过为元素添加data-v-xxx属性并重写css为.class[data-v-xxx]实现作用域限定，不作用于v-html、teleport挂载内容及子组件内部节点。
Vue 的 scoped 样式不是靠运行时控制，而是编译阶段完成的静态隔离。它不改变 CSS 本身的作用规则，而是通过“属性选择器 + 唯一标识”让样式只匹配当前组件内的元素。
编译时自动添加 data-v-xxx 属性
当组件使用 <style scoped></style>，Vue 编译器（vue-loader + postcss-selector-scope）会为该组件模板中**所有普通元素节点**添加一个唯一的 data-v-xxxxxx 属性（哈希值由组件内容生成）。这个属性不会出现在根组件的 <template></template> 源码里，是构建时注入的。
- 即使你写了
<div class="box"></div>，实际渲染出的 DOM 是<div class="box" data-v-f3f3eg9></div> - 动态插入的元素（如 v-html 渲染的内容）不会被自动加上该属性，因此 scoped 样式对其无效
- 子组件的根元素会同时拥有自己的
data-v-yyy和父组件的data-v-xxx（用于深度穿透场景）
CSS 选择器被重写为属性组合
对应地，<style scoped></style> 中的每条 CSS 规则都会被重写：在原选择器末尾追加 [data-v-xxxxxx]，提升特异性并限定作用范围。
-
.btn { color: blue; }→.btn[data-v-f3f3eg9] { color: blue; } -
button:hover { opacity: 0.8; }→button[data-v-f3f3eg9]:hover { opacity: 0.8; } -
div p span { font-weight: bold; }→div[data-v-f3f3eg9] p[data-v-f3f3eg9] span[data-v-f3f3eg9] { font-weight: bold; }
穿透与例外：如何影响子组件或全局
scoped 并非完全封闭。Vue 提供了明确的“出口”，用于有节制地突破限制：
-
:deep(.child)（Vue 3）或::v-deep .child（Vue 2）→ 编译为[data-v-parent] .child，可影响子组件内匹配的元素 -
:global(.reset)→ 保留原始选择器，生成.reset，作用于全局 - 没有 scoped 的
<style></style>块，或<style lang="scss"></style>中未加 scoped，全部按全局处理
它不能解决什么
scoped 解决的是“选择器污染”，不是“样式继承”或“DOM 结构泄漏”：
- 父组件设置
font-size: 14px，子组件仍会继承——这是 CSS 继承机制，与 scoped 无关 - 第三方组件若用
!important或行内 style，scoped 无法覆盖，需配合:deep()或全局样式 - 同名类在不同组件中生成不同 data-v 属性，所以不会冲突；但若手动给元素加多个 data-v 属性，浏览器仍会按 CSS 特异性规则计算，不保证预期效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
