scoped样式穿透需匹配构建工具链、预处理器和Vue版本；Vue 2支持/deep/和::v-deep（须带括号），Vue 3仅支持::v-deep()或官方推荐的:deep()，且选择器层级必须正确，穿透前提为目标元素真实存在DOM中。
scoped样式穿透不是“加个符号就能生效”，而是要匹配当前构建工具链、预处理器和Vue版本的组合。用错语法，样式直接不编译或不生效，连浏览器开发者工具里都看不到对应规则。
Vue 2 和 Vue 3 的 ::v-deep 用法差异
Vue 2（vue-cli 4.5 及以下）支持 /deep/ 和 ::v-deep，但后者必须写成伪元素形式，且不能省略括号；Vue 3（Vite + @vue/compiler-sfc）只认 ::v-deep()，括号不可省略，/deep/ 和 >>> 已被废弃。
-
::v-deep在 Vue 2 中可写作::v-deep .child或::v-deep(.child)，两者都行 -
::v-deep在 Vue 3 中必须带括号：::v-deep(.child)，写成::v-deep .child会被忽略 - 如果项目用了 Vite + Vue 3，但还在用
/deep/，CSS 会原样输出，浏览器不识别，样式无效 - 在 SFC 的
<style lang="scss">里写>>>会导致 Sass 编译报错，因为>>是 Sass 的右移操作符
为什么 ::v-deep() 有时还是不生效
根本原因不是写法错了，而是选择器层级没对上——::v-deep() 只解除它**后面那个选择器**的 scoped 限制，前面的选择器仍受当前组件 scope 约束。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 错误写法：
.my-comp ::v-deep(.el-button)→ 要求父元素有.my-comp类，且该元素必须带当前组件的data-v-xxx属性 - 正确写法：
::v-deep(.el-button)或:deep(.el-button)（Vue 3 Composition API 推荐） - 若想只影响某个子组件内部的按钮，应结合子组件根节点类名：
.sub-root ::v-deep(.el-button)，其中.sub-root是子组件的根元素 class - 第三方组件（如 Element Plus）的根节点通常不带父组件的
data-v-xxx，所以.parent ::v-deep(.child)中的.parent很可能根本没匹配到任何 DOM
Vue 3 中推荐用 :deep() 替代 ::v-deep()
:deep() 是 Vue 3 官方文档明确推荐的语法，属于 CSS pseudo-function，由 @vue/compiler-sfc 原生支持，不依赖 PostCSS 插件。
立即学习“前端免费学习笔记（深入）”；
- 写法统一：
:deep(.el-input__inner) { border-color: red; } - 支持嵌套：
:deep(.el-dialog) :deep(.el-dialog__header) { padding: 0; } - 不能与
scoped同时用于同一<style>标签？可以，但注意：所有含:deep()的规则都会穿透，其余规则仍受 scope 限制 - Vite 项目中若发现
:deep()不生效，先检查是否误用了lang="scss"却没装sass或sass-loader（Vite 用的是sass包，不是node-sass）
真正容易被忽略的点是：穿透生效的前提，是目标元素真实存在于 DOM 中，且未被 v-if 移除或异步加载延迟挂载。调试时别只盯着 CSS 规则，先用 DevTools 确认目标节点是否存在、class 名是否拼写一致、是否被更高优先级样式覆盖。
