vue3 :deep() :slotted() :global() css动态绑定变量

Vue 3提供了一些新的CSS选择器：:deep、:slotted、:global，以及动态绑定变量的能力。在本篇文章中，我们将探讨这些新的选择器和动态绑定变量的用法。

:deep()

:deep()选择器可以匹配当前组件内部所有的后代元素，包括嵌套组件中的元素。这个选择器像是CSS中的后代选择器，但是它可以跨越组件边界进行匹配。例如，如果我们想要在当前组件中选择所有的.box元素，可以这样写：

<style scoped>
 :deep(.box) {
    color:blue
}
</style>

:slotted()

:slotted()选择器可以匹配被插入到插槽中的元素。这个选择器只能在<slot>标签内部使用。例如，如果我们想要选择插入到名为header插槽中的所有元素，可以这样写：

<style scoped>
 :slotted(header) {
    color:blue
}
</style>

:global()

:global()选择器可以匹配全局作用域内的元素。这个选择器可以在局部作用域的CSS中使用，让我们可以选择全局作用域中的元素。例如，如果我们想要选择全局作用域中所有的button元素，可以这样写：

<style lang="less" scoped>
:global(button){
    color:red
}
</style>