深入理解 Scoped CSS 的限制及其穿透方法
一、什么是 Scoped CSS？
Scoped CSS 是 Vue 提供的一种样式作用域机制。当我们在 `<style>` 标签中添加 `scoped` 属性时，Vue 会通过为当前组件的 DOM 元素添加一个独特的属性（例如 `data-v-xxxx`），从而确保 CSS 只作用于当前组件的 DOM。
<template>
<div class="container">
<p class="text">Hello, Scoped CSS!</p>
</div>
</template>
<style scoped>
.container {
background-color: #f0f0f0;
}
.text {
color: #333;
}
</style>
上述代码中的样式只会作用于当前组件的 `.container` 和 `.text`，而不会影响其他组件的同名类名。
二、 Scoped CSS 的限制
虽然 Scoped CSS 有助于隔离样式，但它也带来了一些限制，主要体现在以下几个方面：
1. 无法直接作用于子组件的内部样式
Scoped CSS 的作用范围仅限于当前组件的 DOM。如果子组件的内部有特定的样式需求，父组件的 Scoped CSS 是无法直接修改子组件的 DOM 样式的。
示例：
<!-- 父组件 -->
<template>
<ChildComponent />
</template>
<style scoped>
.child {
color: red;
}
</style>
<!-- 子组件 -->
<template>
<div class="child">This is a child component</div>
</template>
```
在上述代码中，父组件的 `.child` 样式不会作用于子组件的 DOM，因为 Scoped CSS 的作用域被限制在父组件的模板内。
2. 无法覆盖第三方组件库或插件的样式！
当我们使用第三方组件库（如 Ant Design Vue）或插件（如富文本编辑器）时，这些库通常会生成复杂的 DOM 结构和样式。如果我们需会让我们无法直接修改这些要覆盖这些组件的默认样式，Scoped CSS 的作用域限制样式。
示例：
<template>
<Checkbox>Option</Checkbox>
</template>
<style scoped>
/* 这段样式不会生效 */
.ant-checkbox-wrapper span {
font-weight: bold;
}
</style>
```
在这个例子中，`Checkbox` 是一个第三方组件，内部的 DOM 和样式是由组件库定义的。父组件的 Scoped CSS 无法直接修改这些样式。
3. 动态生成的深层 DOM 无法控制
如果子组件中动态生成了深层次的 DOM 结构，父组件的 Scoped CSS 也无法作用于这些动态生成的元素。
示例：
<!-- 父组件 -->
<template>
<ListComponent />
</template>
<style scoped>
.list-item {
background-color: #f0f0f0;
}
</style>
<!-- 子组件 -->
<template>
<ul>
<li v-for="item in items" :key="item.id" class="list-item">
{{ item.name }}
</li>
</ul>
</template>
```
父组件的 Scoped CSS 无法影响子组件中动态生成的 `.list-item` 样式。
三、穿透 Scoped CSS 的限制的方法
为了应对上述问题，Vue 提供了一些方法来穿透 Scoped CSS 的限制，使我们能够修改子组件或更深层 DOM 的样式。
1. 使用 :deep()
:deep() 是 Vue 3 中推荐的穿透 Scoped CSS 的方式。它允许我们选择子组件或深层 DOM 的样式。
示例：
<template>
<ChildComponent />
</template>
<style scoped>
/* 穿透 Scoped CSS */
:deep(.child) {
color: red;
}
</style>
在这个例子中，`:deep(.child)` 可以作用于子组件内部的 `.child` 元素。
适用场景：
- 修改子组件的样式。
- 覆盖第三方组件库的样式。
- 控制动态生成的深层 DOM 样式。
2. 使用 /deep/
/deep/ 是 Vue 2 中的旧式深度选择器，功能与 :deep() 类似，但在 Vue 3 中已被废弃。
示例：
<template>
<ChildComponent />
</template>
<style scoped>
/deep/ .child {
color: red;
}
</style>
```
虽然 /deep/ 仍然可以使用，但 Vue 3 已不推荐，建议迁移到 :deep()
3. 使用 >>>
>>> 是工具层面的深度选择器语法，通常用于兼容性场景。它会被 `vue-loader` 或 PostCSS 转换为浏览器可识别的选择器。
示例：
<template>
<ChildComponent />
</template>
<style scoped>
>>> .child {
color: red;
}
</style>
```
与 `/deep/` 类似，`>>>` 也已过时，不建议在新项目中使用。
4. 使用 ::v-deep
::v-deep 是 Vue 3 中的原生深度选择器，功能与 :deep() 相同。
示例：
<template>
<ChildComponent />
</template>
<style scoped>
::v-deep(.child) {
color: red;
}
</style>
虽然 `::v-deep` 是底层实现，但开发者通常更倾向于使用语法糖 `:deep()`。
5. 全局样式
如果某些样式需要作用于整个项目，可以使用全局样式定义。
示例：
<template>
<ChildComponent />
</template>
<style>
.child {
color: red;
}
</style>
**注意**：全局样式可能会污染其他组件的样式，需谨慎使用。
6. 通过子组件的 `props` 或 `class` 控制
如果子组件支持通过 `props` 或 `class` 自定义样式，可以优先使用这种方式，而不是依赖 Scoped CSS 穿透。
示例：
<!-- 父组件 -->
<template>
<ChildComponent class="custom-class" />
</template>
<style scoped>
.custom-class {
color: red;
}
</style>
总结
Scoped CSS 是 Vue 提供的一种强大的样式隔离机制，但在某些场景下会带来限制。通过穿透 Scoped CSS 的方法（如 `:deep()`），我们可以灵活地修改子组件或深层 DOM 的样式。
选择合适的穿透方法：
- Vue 3 项目：推荐使用 `:deep()` 或 `::v-deep`。
- Vue 2 项目：可以使用 `/deep/` 或 `>>>`，但建议尽早迁移到 Vue 3。
- 最佳实践：如果可能，优先通过组件的 `props` 或 `class` 进行样式控制，避免依赖深度选择器。
通过合理使用 Scoped CSS 和穿透技术，我们可以在保持样式隔离的同时，实现灵活的样式定制！