使用:host-context()和相邻的兄弟选择器

Question

我正在尝试使用:host-context()和相邻的兄弟选择器来设置这样的元素:

<x-foo id="1" active></x-foo>
<x-foo id="2"></x-foo> <!-- use :host-context() to target #2 when adjacent sibling, #1 is [active] -->
<x-foo id="3"></x-foo>

我的元素定义类似于:

<dom-module id="x-foo">
    <template>
        <style>
           :host-context(x-foo[active] + x-foo) {
               background-color: yellow;
           }
        </style>
        Hello
    </template>
    <script src="x-foo.js"></script>    
</dom-module>

然而,这并不是很有效.为什么不？

Answer 1

:host()并且:host-context()只接受复合选择器作为它们的参数,而不是复杂的选择器.

x-foo[active] + x-foo是一个复杂的选择器,其中包含两个化合物的选择器,x-foo[active]和x-foo由相邻的兄弟组合子分离.:host()并且:host-context()可以接受复合选择器,但不接受任何组合器.

不幸的是,因为阴影主机的兄弟姐妹在阴影环境中不存在,所以你将无法编写类似的内容x-foo[active] + :host.因此,我认为您无法在阴影环境中完成您想要完成的任务.(当然,在光线环境中,您可以编写x-foo[active] + x-foo,但这会破坏将CSS预先打包到Web组件中的目的.)

我不清楚为什么:host()并且一开始:host-context()就没有允许复杂的选择器,因为如果他们这样做,你所拥有的只会有效.