Scoped CSS“意外”穿透并非bug，而是设计使然：子组件根元素天然携带父组件data-v属性；v-html内容不带该属性；哈希碰撞、::v-deep误写、第三方组件挂载body及预处理器缩进错误等均会导致非主动穿透。
为什么 Scoped CSS 会“意外”穿透
Scoped CSS 不是绝对隔离的屏障，它本身设计上就留有可控出口。所谓“仍然出现穿透”，往往不是 bug，而是你没意识到这些机制本就存在。
最常见的三类非主动穿透现象：
-
子组件根元素天然携带父组件的 <code>data-v-xxx属性 —— Vue 明确允许父组件影响子组件根节点布局（比如调整margin、width），这是 scoped 的设计特性，不是失效 -
v-html渲染的内容完全不带data-v-xxx属性 —— 它绕过了 Vue 模板编译流程，自然不受 scoped 约束，所有样式规则都按原生 CSS 解析，.content table就真的匹配到 DOM 中任意<table> - 多个组件用了相同 class 名 + 相同哈希（极小概率但存在） —— 如果两个组件文件路径哈希碰撞（比如构建缓存未清理或 SSR 多实例共用同一 hash seed），
data-v-abc123可能重复，导致样式“跨组件生效”
::v-deep 写错位置反而造成“伪穿透”
很多人以为写了 ::v-deep 就万事大吉，结果发现样式还是生效了——其实是因为写法错误，导致编译器直接忽略伪类，退化成普通全局选择器。
典型错误写法及后果：
立即学习“前端免费学习笔记（深入）”；
-
::v-deep .el-input__inner→::v-deep前置，整个选择器被丢弃，实际生成的是.el-input__inner（全局生效） -
.parent::v-deep .child→ 缺少空格，编译后变成.parent[data-v-xxx]::v-deep .child，无效伪类，同样退化为全局 -
::v-deep [disabled]或::v-deep #dialog→ 部分构建工具（如 Vite + PostCSS 8+）会静默过滤含 ID/属性选择器的::v-deep链，最终无 CSS 输出
第三方组件挂载到 body 导致“穿透失败”却被误判为“穿透生效”
像 el-dialog、van-popup 这类组件，DOM 节点被移出当前组件树，直接插入 body。此时你写的 .wrapper ::v-deep .el-dialog 根本不匹配——因为 .el-dialog 节点根本没有 data-v-xxx 属性。
但有时候你发现样式“好像生效了”，原因可能是：
- 你同时在全局样式里写了同名规则（比如
src/assets/styles/global.css中有.el-dialog { … }） - 第三方组件自己暴露了
class或wrap-classprop，你传入后，该 class 被加在了挂载到body的节点上，而你恰好用全局样式覆盖了它 - 浏览器渲染顺序或 CSS 权重偶然让你的规则赢了（比如用了
!important或更长的选择器链）
预处理器（Sass/Less）中缩进破坏 ::v-deep 语义
在 <style lang="scss"> 里，::v-deep 必须顶格写，不能缩进。否则 Sass 编译器会把它当作嵌套声明的一部分，生成错误选择器。
错误示例（Sass）：
.parent {
margin: 10px;
::v-deep .child { color: red; } // ✅ 正确：顶格写伪类
}
// ❌ 错误：缩进后 Sass 把它当成 .parent 的子选择器处理
.parent {
margin: 10px;
& {
::v-deep .child { color: blue; } // 编译后可能变成 .parent[data-v-xxx] ::v-deep .child → 无效
}
}
真正容易被忽略的点在于：这种错误不会报错，CSS 仍会生成，但规则不生效，且 DevTools 里看不到对应样式——因为编译后的选择器根本无法匹配任何元素。
