::v-deep 失效主因是作用域限制与写法错误，应改用 :deep() 函数式伪类；挂载到 body 的组件需通过自定义 class 全局样式覆盖，scoped 样式仅作用于当前组件直接子节点。
Vue 3 中 ::v-deep 失效，基本不是语法写错了，而是你用的写法被编译器忽略、或根本没匹配到目标节点——它压根就不是“万能穿透开关”，而是一个有明确作用域和限制的伪类。
为什么 ::v-deep 写了但样式不生效？
常见现象是 DevTools 里看不到对应规则，或者规则存在但没命中元素。根本原因有三个：
-
::v-deep必须出现在选择器链中，且只影响它**之后**的部分；写成::v-deep .el-input是对的，但.parent ::v-deep或::v-deep .parent .child（前置空格缺失）会被直接忽略 - 目标元素不在当前组件 DOM 树内（比如
el-dialog挂载到body），::v-deep对它完全无效——因为那个节点根本没有data-v-xxx属性，连“作用域”都不存在 - 在 SCSS/Less 中用了
>>>或/deep/：前者被预处理器当嵌套操作符吃掉，后者被 Vue 3 编译器当非法词丢弃，两者都不生成任何 CSS
:deep() 是当前唯一推荐且稳定的写法
:deep() 是 Vue 官方从 v3.2+ 明确引入的函数式伪类，绕过预处理器解析，由 Vue 编译器直译，兼容性最稳。Vite 4.3+、vue-loader 17.4+ 已对 ::v-deep 发出警告：::v-deep usage as a combinator has been deprecated. Use :deep() instead.
- 必须带括号：
:deep(.el-input__inner)✅，:deep .el-input__inner❌（会被忽略） - 支持嵌套：
.form :deep(.el-input) :deep(.el-input__inner)可连续穿透多层 - 在 SCSS 中可配合变量：
$color: #409eff; .btn :deep(.el-button__inner) { color: $color; } - 不能用于 ID 或属性选择器：
:deep(#id)或:deep([disabled])多数构建工具会静默丢弃
挂载到 body 的组件（如弹窗、Tooltip）怎么改样式？
:deep() 对它们完全无效——因为渲染节点脱离了父组件的 data-v-xxx 作用域。强行加全局样式又怕污染，稳妥做法是：
- 给第三方组件传
class-name或wrap-class（如<el-dialog :class-name="'my-dialog'"></el-dialog>），再在全局样式文件（如src/assets/styles/global.scss）里写.my-dialog .el-dialog { … } - 避免直接操作
.el-dialog这类泛命名，优先用自定义 class 做前缀隔离 - 禁用
<style scoped></style>改全局样式？风险太高，尤其在微前端或多团队项目里，容易引发不可控覆盖
Scoped 穿透失效时，第一反应不该是换写法，而是查 DOM
很多“失效”其实是误解了 scoped 的机制：它只给当前组件的**直接子节点**打 data-v-xxx，子组件内部结构不会被注入该属性。所以真正该做的第一件事是打开 DevTools，确认目标元素上有没有这个属性。
- 如果目标元素（比如
<button></button>）上没有data-v-xxx，说明它属于子组件内部 DOM，必须用:deep()穿透 - 如果目标元素是第三方组件的根节点（比如
<el-dialog></el-dialog>），但它身上也没有data-v-xxx，说明它被挂到了body，此时:deep()无意义，得走全局 class 路线 - nvue 场景下，scoped 样式压根不进渲染管线——删掉
scoped，改用 class +upx+ 显式display: flex
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
