CSS 样式穿透
CSS 样式穿透(Shadow DOM / 组件作用域) 相关的写法,下面直接对比👇
一、核心对比表
写法 | 状态 | 所属规范 | 典型使用场景 | 是否推荐 |
|---|---|---|---|---|
| ❌已废弃 | 旧版 Shadow DOM 草案 | Angular / 早期 Vue / Polymer | ❌ 不推荐 |
| ⚠️过渡写法 | Vue 2 / 部分框架私有 | Vue SFC | ⚠️ 仅兼容旧项目 |
| ✅当前标准 | Vue 3 / 现代 CSS | Vue 3 / Vite / Web Components | ✅强烈推荐 |
| ⚠️ Vue 2 别名 | Vue 2 私有 | Vue 2 | ⚠️ 旧项目可用 |
二、逐个拆解
1️⃣/deep/(已死)
css
.parent /deep/ .child { color: red; }来自早期 Shadow DOM 规范
Chrome 曾经支持,后来被 W3C 移除
现在Chrome / Firefox / Safari 均已不支持或警告
Angular 早期文档用过,现在也已废弃
✅结论:别再用了,写了也没用。
2️⃣::deep(半死不活)
css
.parent ::deep .child { color: red; }Vue 2 时代用来穿透
scoped不是标准 CSS,是Vue 编译器私有的魔法
在 Vue 3 中不推荐
✅结论:Vue 2 老项目还能跑,新项目别写。
3️⃣:deep()✅ 当前正统
css
.parent :deep(.child) { color: red; }Vue 3官方推荐写法
编译时会正确处理
scoped语义清晰,函数式写法
与 CSS 规范兼容性最好
✅结论:现在只写这个。
4️⃣::v-deep(Vue 2 遗产)
css
.parent ::v-deep .child { color: red; }Vue 2 的别名写法
和
::deep等价Vue 3 中已不推荐使用
✅结论:只出现在 Vue 2 老代码里。
三、为什么要有这些东西?
问题根源:scoped样式
vue
<style scoped> .card { color: red; } </style>Vue 会把它编译成:
css
.card[data-v-abc123] { color: red; }👉子组件内部的.card不会被命中
解决方案:样式穿透
css
:deep(.el-button) { color: red; }编译后 ≈ css
[data-v-abc123] .el-button { color: red; }✅ 成功“钻”进子组件
