Vue 3 中 /deep/ 报错是因为编译器已移除支持，应改用 :deep()；其必须紧跟选择器后、不能前置或单独使用；挂载到 body 的组件需通过 wrap-class 等方式处理；穿透失效常因根元素无 data-v-xxx 或选择器拼写错误。
Vue 3里/deep/报错，是因为它根本没被编译器识别
Vue 3 的 @vue/compiler-sfc 已彻底移除对 /deep/ 的解析支持——它不是 CSS 标准，也不是 Vue 3 的保留字。你在代码里写 .foo /deep/ .bar，Vite 或 Vue CLI 5+ 会直接当作非法 CSS 丢弃，最终生成的 CSS 里压根没有这条规则。
常见错误现象包括：Unknown word（PostCSS 报错）、控制台无对应样式输出、DevTools 里查不到编译后的选择器。
别试兼容性补丁或旧版插件“绕过”这个问题——那些只是临时容忍，随时可能失效。
:deep() 必须紧跟在选择器后面，且只影响其后的部分
:deep() 是伪类，不是前缀，不能单独用，也不能放在最前面。
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 正确：
.wrapper :deep(.el-input__inner) { border: 2px solid red; } - ❌ 错误：
:deep(.wrapper .el-input__inner)（伪类前置无效） - ❌ 错误：
.wrapper :deep(#input-id)（ID 选择器会被某些构建工具静默丢弃） - ⚠️ 注意：Sass/Less 中必须顶格写
:deep()，缩进写法不生效
挂载到 body 的组件（如 el-dialog）穿透不了，因为不在作用域内
像 el-dialog、van-popup、ant-modal 这类组件，DOM 节点被直接挂载到 body，完全脱离父组件的 data-v-xxx 属性作用域。你写再多 :deep(.el-dialog)，编译后选择器仍带 [data-v-xxx]，而 dialog 元素上根本没有这个属性。
可行方案：
- 给组件传
class或wrap-class（如<el-dialog wrap-class="my-dialog">），再在全局样式文件里写.my-dialog .el-dialog { ... } - 避免全删
scoped——微前端或协作项目中极易引发样式污染 - 确认目标元素是否真被 scoped 标记：用 DevTools 看它有没有
data-v-xxx属性
为什么写了 :deep() 还不生效？先检查这三件事
很多“穿透失败”不是语法错，而是机制没对上：
- 子组件根元素是否用了
defineExpose或透出真实 DOM？某些封装过深的 UI 组件，内部结构可能动态生成，导致选择器匹配不到 -
:deep()后的选择器是否拼写准确？比如.el-table__row不是.el-table-row - 是否用了动态 class（如
:class="['base', statusClass]"）？这类 class 不会被自动加data-v-xxx，得靠:deep()显式处理
真正容易被忽略的是：scoped 只给子组件的**根元素**加属性标记，子组件内部所有后代节点都不带这个标记——所以穿透永远是对“子组件内部的后代”，而不是“子组件本身”。
