但是 ::v-deep 不是要弃用了吗？

是的，Vue 3 中废除了 ::v-deep，因为它不符合 CSS 规范，并且可能导致样式污染和性能问题。取而代之的是使用 /deep/ 或 >>> 选择器来代替。不过需要注意的是，/deep/ 和 >>> 选择器在某些情况下可能会失效，因此建议尽量避免使用。如果确实需要使用，可以考虑使用 scoped 样式或者 CSS Modules 来避免影响其他组件。

相关问题

vue3 中 scss 使用 :deep 不支持嵌套，::v-deep 又即将弃用，怎么办？

在 Vue3 中，可以使用 `::v-deep` 或 `>>>` 来实现深度选择器，但是官方已经宣布 `::v-deep` 即将被弃用，而 `>>>` 在某些情况下会出现问题。

解决方法：

1.使用 `:global`，可以将样式应用于整个组件或应用程序。例如，要应用于整个组件：

<style scoped>
:global(.my-class) {
  color: red;
}
</style>

2.使用 CSS 变量，可以在组件中定义变量，并在样式中使用它们。例如：

<style scoped>
:root {
  --my-color: red;
}

.my-class {
  color: var(--my-color);
}
</style>

3.使用 `::v-deep` 的替代方案 `::slotted`，它能在父组件样式中选择子组件的内容。例如：

/* 子组件 */
<template>
  <div class="my-class">
    <slot></slot>
  </div>
</template>

/* 父组件 */
<template>
  <div>
    <slot>
      <p class="my-class">This paragraph will be styled</p>
    </slot>
  </div>
</template>

<style scoped>
::slotted(.my-class) {
  color: red;
}
</style>

以上是一些可行的解决方法，可以根据实际情况选择适合自己的方式。

::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep

在Vue.js中，`::v-deep`是一种用于深度选择器的语法。它可以用来选择组件内部的元素，并且可以穿透组件的样式作用域。然而，从Vue 2.6.0版本开始，`::v-deep`作为一个组合器已经被弃用了，推荐使用`:deep(<inner-selector>)`来代替。

`:deep(<inner-selector>)`可以实现与`::v-deep`相同的效果，即选择组件内部的元素并穿透样式作用域。你可以将`<inner-selector>`替换为你想要选择的元素的选择器。

例如，如果你想选择组件内部的所有`p`元素，你可以使用`:deep(p)`来实现。

需要注意的是，`:deep(<inner-selector>)`只能在有样式作用域的组件中使用，如果组件没有样式作用域，则无法使用该语法。