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>
