Vue 3 scoped样式无法影响子组件元素是机制使然，因scoped仅给当前组件DOM加data-v-xxx属性；穿透需用::v-deep且必须置于选择器链中间并带空格，如.my-form ::v-deep .el-input__inner。
Vue 3 中 scoped 样式无法影响子组件内部元素，不是你写错了，而是机制本就如此——scoped 只会给当前组件的 DOM 元素加 data-v-xxx 属性，子组件根节点虽被挂载进来，但它的内部结构完全不受父组件的属性标记约束。要让样式“穿过去”，必须用官方支持的穿透语法，且严格遵循作用域规则。
::v-deep 必须出现在选择器链中间，不能前置
::v-deep 不是万能前缀，它只对自身**之后**的选择器生效，且必须紧接在某个已有选择器后面（中间有空格），否则会被编译器忽略。
- ✅ 正确：
.my-form ::v-deep .el-input__inner→ 编译后匹配.my-form[data-v-xxx] .el-input__inner - ❌ 错误：
::v-deep .el-input__inner→ 前置写法无效，构建时静默丢弃 - ❌ 错误：
.my-form::v-deep .el-input__inner→ 少了空格，解析为伪类绑定到.my-form上，不触发穿透 - ⚠️ 注意：
::v-deep #id或::v-deep [disabled]在部分 Vite + Sass 组合中会丢失，优先改用 class
挂载到 body 的组件（如弹窗、Tooltip）根本穿不过去
像 el-dialog、van-popup 这类组件，渲染节点直接插入 <body>，完全脱离父组件的 DOM 树，data-v-xxx 属性自然不存在，::v-deep 失效是必然的。
- 不要尝试用
::v-deep .el-dialog去覆盖——DevTools 里一查就能确认它根本没有data-v-xxx - 推荐做法：给组件传
class-name或wrap-class（如<el-dialog :class-name="'my-dialog'">），再在全局样式文件（如src/assets/styles/global.scss）里写.my-dialog .el-dialog { … } - 避免方案：删掉
scoped→ 全局污染风险高，尤其在微前端或多人协作项目中极易引发样式冲突
v-html 渲染的内容永远拿不到 data-v-xxx
v-html 插入的是纯字符串 HTML，Vue 不会对其中的标签做任何属性注入，所以即使你在 <style scoped> 里写 .content table，编译后仍是 .content[data-v-xxx] table[data-v-xxx] ——而 table 根本没这个属性，自然不匹配。
立即学习“前端免费学习笔记（深入）”；
- ✅ 可行解法：用
.content ::v-deep table→ 编译为.content[data-v-xxx] table，跳过对table的属性校验 - ⚠️ 限制：如果预处理器是 Less，需写成
.content ::v-deep(table)（括号包裹），否则可能报错 - ⚠️ 风险：该写法会让所有
table元素无差别匹配，若页面存在多个富文本区域，建议加更具体的容器 class 限定范围
真正卡住人的往往不是语法写错，而是没意识到 ::v-deep 的作用边界：它只能绕过属性选择器限制，但无法突破 DOM 挂载位置和编译时注入机制。先打开 DevTools 确认目标元素有没有 data-v-xxx，再决定是用穿透、传 class 还是切全局样式——这比反复试 /deep/ 或 >>> 省十倍时间。
