scoped css 无法穿透子组件样式是设计使然，因其仅作用于当前组件根元素及直接子元素，依赖属性选择器实现隔离；:deep() 和 ::v-deep 是标准穿透方式，需正确嵌套使用并注意优先级与适用场景。
Scoped CSS 无法穿透子组件样式是设计使然
Vue 的 scoped 属性只作用于当前组件的根元素及其直接子元素，对 <slot></slot> 插入的内容、异步加载的子组件、或通过 v-for 渲染的第三方组件（如 <el-button></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></style>内部，且必须接在有效选择器之后（不能单独写:deep() {...}） - 穿透目标必须是子组件模板中真实存在的类名（比如
el-button是 Element Plus 组件根元素的类，不是你随便写的） - 如果子组件自身也用了
scoped，它的内部样式不会被你的:deep()覆盖——除非它暴露了defineExpose或支持class-prefix配置
Less 的嵌套 + :deep() 容易漏掉层级或写错路径
Less 嵌套本身不改变 CSS 作用域逻辑，但容易让人误以为缩进 = DOM 层级。例如下面写法是错的：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章