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"></el-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 只给子组件的**根元素**加属性标记，子组件内部所有后代节点都不带这个标记——所以穿透永远是对“子组件内部的后代”，而不是“子组件本身”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！