刘明野

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>
本文为作者刘明野发布,未经允许禁止转载!
1590
0
6
发表留言

友情链接