CSS 深度选择器：深入理解 `::v-deep`

1. 深度选择器的背景

在 Vue 组件的 scoped 样式中，CSS 选择器默认仅作用于当前组件的 DOM 元素，无法直接影响子组件的内容。为了提供一种方法可以"深入"子组件的结构并应用样式，Vue 引入了深度选择器。

2. 何为深度选择器？

深度选择器用于在 scoped 样式中穿透子组件的样式作用域，以便修改子组件的内部结构样式。在 Vue 2 和 Vue 3 中，深度选择器的写法有所不同。

Vue 2 的 >>> 语法

在 Vue 2 的 scoped 样式中，通常使用 >>> 作为深度选择器。例如：

<style scoped>
.parent >>> .child {
  color: red;
}
</style>

编译后，>>> 会被转换成适用于不同预处理器的深度选择器，例如 /deep/。

Vue 3 的 ::v-deep 语法

在 Vue 3 中，官方推荐使用 ::v-deep 作为深度选择器的标准写法。

<style scoped>
::v-deep(.child) {
  color: red;
}
</style>

在编译后，Vue 会自动调整样式，使其正确作用于子组件的元素。

3. 使用深度选择器的场景

3.1. 修改第三方组件的样式

当我们使用 el-input（Element Plus 组件）时，通常需要调整其内部 .el-input__inner 样式。

<style scoped>
::v-deep(.el-input__inner) {
  border: 2px solid red;
}
</style>

这样，我们可以在 scoped 作用域内修改 el-input 内部的 input 样式。

3.2. 作用于嵌套子组件

有时，我们需要在父组件中修改嵌套子组件的特定样式：

<style scoped>
.parent ::v-deep(.child) {
  font-size: 20px;
}
</style>

这样可以确保 .child 元素正确地应用样式，即使它属于子组件。

4. 深度选择器的替代方案

在某些情况下，我们可以避免使用 ::v-deep，采用以下方法：

4.1. 直接在子组件中暴露 class 或 props

如果子组件支持 class 透传，可以直接在子组件上添加 class 以进行样式修改。

<child-component class="custom-style" />
<style scoped>
.custom-style {
  color: blue;
}
</style>

或者子组件提供 props 方式允许修改内部样式。

4.2. 使用全局 CSS 选择器

如果是全局需要修改的组件，可以通过 global 样式或 :global 选择器（如 sass/less）进行修改。

:global(.child) {
  font-weight: bold;
}

5. 结论

深度选择器 ::v-deep 在 Vue 3 中取代了 >>>，用于在 scoped 样式中穿透作用域并修改子组件样式。尽管它很有用，但应尽量考虑使用其他更符合组件化思想的方式，如 props 传递或 class 透传，以提高组件的可维护性和复用性。