Scoped CSS 无法穿透子组件样式是设计使然，因其仅作用于当前组件根元素及直接子元素，依赖属性选择器实现隔离；:deep() 和 ::v-deep 是标准穿透方式，需正确嵌套使用并注意优先级与适用场景。
Scoped CSS 无法穿透子组件样式是设计使然
Vue 的 scoped 属性只作用于当前组件的根元素及其直接子元素，对 <slot> 插入的内容、异步加载的子组件、或通过 v-for 渲染的第三方组件（如 <el-button>）完全无效。这不是 bug，而是 scoped CSS 的隔离边界定义决定的——它靠属性选择器（如 data-v-f3f3eg9）实现，而子组件的 DOM 并不携带该属性。
::v-deep 和 :deep() 是穿透 Scoped 的标准方式
Vue 2 中常用 ::v-deep（伪类写法），Vue 3（vue-loader >= 15.9）起推荐用 :deep() 函数语法，二者功能一致，但后者更语义化、兼容性更好。注意：::v-deep 在某些 Less 版本中需写成 /::v-deep/ 才能被正确解析（尤其搭配 less-loader 时）。
常见写法示例：
.my-card {
:deep(.el-button) {
padding: 8px 16px;
border-radius: 4px;
}
/::v-deep/ .el-input__inner {
border-color: #409eff;
}
}
-
:deep()只能用于<style scoped>内部，且必须接在有效选择器之后（不能单独写:deep() {...}） - 穿透目标必须是子组件模板中真实存在的类名（比如
el-button是 Element Plus 组件根元素的类，不是你随便写的） - 如果子组件自身也用了
scoped，它的内部样式不会被你的:deep()覆盖——除非它暴露了defineExpose或支持class-prefix配置
Less 的嵌套 + :deep() 容易漏掉层级或写错路径
Less 嵌套本身不改变 CSS 作用域逻辑，但容易让人误以为缩进 = DOM 层级。例如下面写法是错的：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
.wrapper {
.content {
:deep(.btn) { ... } // ❌ 错：.btn 不在 .content 下，而是在 slot 插入的子组件里
}
}
正确做法是把 :deep() 放在最外层可命中位置，或用明确的祖先选择器锚定：
.my-form :deep(.el-input__inner) {
font-size: 14px;
}
// 或更安全地加个自定义 wrapper 类
.form-wrapper :deep(.el-input__inner) {
background: #f9f9f9;
}
- 避免过度依赖嵌套深度，优先用语义化 class 名做选择器
- 若子组件使用了 CSS-in-JS（如某些 UI 库的 v3 版本），
:deep()可能失效，此时应改用全局样式或库提供的 theme 变量 - 运行时动态插入的 DOM（如
ElMessage、ElPopconfirm）不在当前组件树内，:deep()无效，必须走<style>全局块或 inject-style 方案
真正需要“深度选择”的场景其实有限
多数所谓“需要穿透”的需求，本质是组件职责不清：父组件不该强控子组件视觉细节。更健壮的做法是：
- 优先使用子组件暴露的
props（如size、type、class-name）来定制外观 - 检查子组件是否支持
theme或namespace配置（如 Element Plus 的el-config-provider） - 对高频复用的定制组合，封装一层 wrapper 组件，自己控制所有样式
- 仅当上述都不可行时，才用
:deep()，并加注释说明原因和预期影响范围
最容易被忽略的是：CSS 优先级问题。即使穿透成功，若子组件用了 !important 或更高权重的选择器（如 .el-button.is-primary:hover），你的 :deep() 样式仍可能被覆盖——这时得手动提权，比如加 !important 或补全状态伪类。
