scoped 默认阻止样式穿透，需用 :deep() 主动穿透；vue 3 仅支持 :deep() 函数式写法，/deep/ 和 >>> 已废弃；穿透前须确认目标元素是否带 data-v-xxx 属性，否则不在作用域内。
scoped 本身不“避免穿透”，它默认就阻止穿透——真正要解决的是“如何在需要时主动穿透”。如果你发现子组件样式没被影响，不是 scoped 失效了，而是它按设计工作正常；问题往往出在你误以为它该生效，或没用对穿透语法。
:deep() 是 Vue 3 唯一推荐的穿透写法
Vue 3 编译器已完全移除对 /deep/ 和 >>> 的支持，它们会直接报错（PostCSS 报 Unknown word）或静默丢弃。必须用 :deep() 函数式伪类，且只能作用于括号内的选择器部分。
-
:deep(.el-input__inner)✅ 有效，编译后生成.el-input__inner[data-v-xxx]类匹配逻辑 -
::v-deep .el-input__inner❌ Vue 3 不认这种写法，会被忽略（注意是双冒号+伪类，不是函数） -
:deep(#id)⚠️ 大部分构建工具会丢弃，ID 选择器不推荐用于穿透 - 在 Sass/Less 中，
:deep()必须顶格写，缩进或嵌套在父选择器内部会失效
穿透失败？先确认目标元素是否真在 scoped 作用域内
很多“穿透不了”其实是误解了 scoped 的作用边界：它只给当前组件模板里声明的 DOM 打 data-v-xxx 属性，不包括动态挂载到 body 的节点（如 el-dialog、van-popup），也不包括 v-html 插入的内容。
- 打开 DevTools，搜索目标元素，看它有没有
data-v-xxx属性 —— 没有，说明根本不在当前 scoped 范围内 -
v-html渲染的<table> 不会带 <code>data-v-xxx，所以.content table在 scoped 下永远不生效 - 第三方弹窗组件渲染后 DOM 在
下，:deep(.el-dialog)无效，得用全局 class + 全局样式 - 给第三方组件传
class或wrap-class（如 Element Plus 的popper-class），再配合全局样式精准控制 - 用
row-class-name这类 API 返回 class，然后在全局样式里定义该 class（不要放在 scoped style 里） - 如果只是改一个按钮圆角，直接在组件外加
<style></style>（无 scoped），比满屏:deep()更清晰 - 避免把整个
<style></style>标签去掉 scoped —— 一旦类名冲突，排查成本远高于写几行:deep()
别滥用 :deep()，优先考虑更安全的替代方案
过度依赖 :deep() 容易让样式耦合变深，尤其在多人协作或微前端项目中。能不用就不用，优先选明确可控的方式：
真正容易被忽略的点是：scoped 不是“开关”，而是一套编译规则；:deep() 不是万能钥匙，它只在编译器能识别的范围内起作用。写之前，先看一眼 DevTools 里的 DOM 结构和属性标记 —— 那才是真实世界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
