html - 使用 :host-context() with an adjacent sibling selector

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() and :host-context() only accept a compound selector as their argument ，而不是复杂的选择器。

x-foo[active] + x-foo 是一个复合选择器，包含两个复合选择器，x-foo[active] 和 x-foo ，由相邻的兄弟组合器分隔。 :host() 和 :host-context() 可以接受任一复合选择器，但不能接受任何组合器。

不幸的是，因为阴影主机的 sibling 不存在于阴影上下文中，您将无法编写类似 x-foo[active] + :host 的内容。因此，我认为您无法在影子环境中完成您想要做的事情。 (当然，在 light 上下文中，您可以只写 x-foo[active] + x-foo，但这违背了将 CSS 预打包到 Web 组件中的目的。)

我不清楚为什么 :host() 和 :host-context() 首先没有指定允许复杂的选择器，因为如果它们做了，你所拥有的就会奏效。