Shadow DOM中:where(:root,:host)定义CSS变量失效原因咨询

这是因为:where()选择器的权重为0，直接影响了CSS变量的生效优先级：

• 当使用:root, :host时，这两个伪类选择器各自带有1级权重，定义的CSS变量优先级足够高，能在Shadow DOM内部正常被继承和应用。
• 而:where(:root, :host)会把整个选择器的权重降为0，此时如果Shadow DOM内部存在其他权重更高的选择器（哪怕是普通元素选择器，权重为1）定义了同名变量，或者浏览器默认样式的隐性权重干扰，都会直接覆盖这个低权重的变量定义，导致它无法生效。

另外，在Shadow DOM的作用域里，:host指向自定义元素的宿主节点，:root指向Shadow根节点，变量需要足够的权重才能穿透作用域被内部元素读取。:where()的降权特性刚好破坏了这个条件，所以变量失效。

对于Panda CSS自动生成的代码，你可以尝试通过配置框架，让它输出不带:where()包裹的选择器，或者在Shadow DOM内部通过更高权重的选择器重新声明变量来覆盖。

内容的提问来源于stack exchange，提问作者morishin