[前端] vue2的/deep/转化为vue3语法（笔记）

vue2语法示例

<style scoped lang="less">
  /deep/.el-carousel__button {
    width: 8px;
    height: 3px;
    border-radius: 3px;
  }
  /deep/.el-carousel__indicator.is-active button {
    width: 16px;
  }
}
</style>

在 Vue 3 中，/deep/ 或 >>> 选择器已被废弃，因为它们与 Shadow DOM 的概念相冲突。Vue 3 引入了 v-deep 或 ::v-deep 伪类作为非标准的解决方案来穿透 scoped 样式，但这并不是长期推荐的实践。通常，你应该考虑使用 CSS 模块（CSS Modules）或组件级别的 CSS（如使用 style 标签的 module 属性）来管理样式。

然而，如果你确实需要在 Vue 3 中穿透 scoped 限制来修改第三方组件的样式，你可以使用 ::v-deep。但请注意，这可能会在未来的 Vue 版本中移除，所以最好尽量避免这种情况。以下是使用 ::v-deep 的示例：

<style scoped lang="less">
:deep(.el-carousel__button) {
    width: 8px;
    height: 3px;
    border-radius: 3px;
  }

 :deep(.el-carousel__indicator.is-active button) {
    width: 16px;
  }
</style>