Vue scoped样式是编译期静态隔离机制，通过为元素添加data-v-xxx属性并重写CSS为.class[data-v-xxx]实现作用域限定，不作用于v-html、Teleport挂载内容及子组件内部节点。
scoped 是编译期静态注入，不是运行时控制
Vue 的 scoped 不依赖 Shadow DOM，也不在浏览器里动态加属性或改样式——它完全发生在构建阶段。你写 <style scoped></style>，vue-loader 或 @vitejs/plugin-vue 就会在编译时做两件事：给模板里每个普通元素节点打上 data-v-xxxxxx 属性，并把 CSS 选择器全部重写成带该属性的形式。
这意味着：你在 DevTools 里看到的 data-v-xxx 是构建产物，不是 Vue 运行时插入的；如果你用 v-html 渲染 HTML 字符串，那些元素不会自动带上这个属性，所以 scoped 样式对它们无效。
为什么子组件根元素会同时有父、子两个 data-v 属性
这是为了支持深度穿透（如 ::v-deep）和避免样式“漏出”。父组件的 .child[data-v-aaa] 能匹配到子组件根元素，是因为编译器会主动给子组件的根节点同时添加父组件的 data-v-aaa 和它自己的 data-v-bbb。
- 子组件内部的非根元素（比如
<p></p>、<span></span>）只带自己的data-v-bbb - 父组件里写的
.child选择器会被编译为.child[data-v-aaa]，它能命中子组件根元素（因为该元素有data-v-aaa） - 但子组件自己写的
.child[data-v-bbb]优先级更高，通常会覆盖父组件的同名样式（除非父组件用::v-deep强制穿透）
::v-deep 等穿透语法实际怎么工作的
::v-deep、/deep/、>>> 都是告诉编译器：“别给这部分选择器加当前组件的 data-v-xxx，或者加完之后再拆开”。例如：
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
::v-deep .icon → 编译后变成 .parent[data-v-aaa] .icon[data-v-bbb]（匹配子组件内带 data-v-bbb 的 .icon）
.parent >>> .icon → 同样产出 .parent[data-v-aaa] .icon[data-v-bbb]
注意：::v-deep 必须写在 <style scoped></style> 块里才生效；如果写在没加 scoped 的 <style></style> 中，它就只是个普通伪元素，不起穿透作用。
scoped 不能解决继承和动态内容样式问题
很多人误以为加了 scoped 就能“完全隔离”所有样式行为，其实它只管选择器匹配范围，不管 CSS 的天然机制：
- 父组件设了
font-size: 16px，子组件仍会继承——这是 CSS 继承，scoped不干预 -
v-html插入的内容没有data-v-xxx，所以scoped样式不生效，必须用::v-deep或全局样式兜底 - Teleport 挂载到
的内容，DOM 节点脱离原组件结构，也不会带data-v-xxx
真正容易被忽略的是：scoped 的哈希值由组件文件路径 + 内容生成，如果两个组件内容完全一样，它们的 data-v-xxx 可能撞车——虽然概率极低，但在某些 monorepo 或符号链接场景下，确实会导致样式意外泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
