::v-deep仅作用于当前组件dom树内、自身之后的选择器部分，对teleport挂载到body的组件或v-html插入的内容无效；需用wrap-class配合全局样式或css modules替代。

Vue 3 项目里 scoped 样式穿不透子组件，不是写法错了，而是机制没对上——::v-deep 必须用对位置、用对对象，且得避开挂载到 body 的组件这类“局外人”。

为什么 ::v-deep 写了却没生效

根本原因在于它只影响**自身之后的选择器部分**，且仅对当前组件 DOM 树内的元素起作用。

• .parent ::v-deep .child ✅ 正确：编译后生成 .parent[data-v-xxx] .child，能命中子组件内部的 .child
• ::v-deep .parent .child ❌ 无效：伪类前置，整个规则被忽略
• ::v-deep #id 或 ::v-deep [disabled] ⚠️ 部分构建工具（如 Vite + PostCSS）会静默丢弃，不报错也不生成 CSS
• 在 Sass/Less 中缩进写 ::v-deep（如嵌套在 .parent { } 里但缩进了）→ 编译失败或失效，必须顶格写

第三方组件（如 el-dialog、van-popup）样式完全不受控

这类组件通过 Teleport 挂载到 body，脱离了父组件的 data-v-xxx 属性作用域，::v-deep 失效是必然的。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 审查元素会发现目标节点根本没有 data-v-xxx 属性
• 不能靠删掉 scoped 解决——污染全局，微前端或协作项目中风险极高
• 推荐做法：给组件传 class 或 wrap-class（如 <el-dialog wrap-class="my-dialog"></el-dialog>），再在全局样式文件（如 src/assets/styles/global.scss）里写 .my-dialog .el-dialog { ... }
• 更可控的替代方案：改用 CSS Modules，配合 BEM 命名，彻底规避作用域逃逸问题

v-html 渲染的内容样式不生效

v-html 插入的 HTML 不会被 Vue 注入 data-v-xxx 属性，所以即使写了 ::v-deep，也无法匹配。

• 现象：.content table { border: 1px solid red; } 在 scoped 下完全无效
• ::v-deep table 同样无效——因为 table 节点不在当前组件 DOM 树内
• 可行解：把相关样式提到全局，或用 :global(.content table) { ... }（需确认构建工具支持）
• 长期建议：富文本样式尽量由服务端注入 class，前端只负责加载和隔离容器

真正卡住人的往往不是语法，而是没意识到 ::v-deep 只是个“局部放大镜”，照不到 Teleport 出去的节点，也照不进 v-html 倒进去的 DOM。动手前先打开 DevTools 看一眼目标元素有没有 data-v-xxx，比反复改选择器高效得多。

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