我正在尝试使用：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>
但是这不太管用。为什么不呢？
最佳答案
: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()可以接受任意一个复合选择器，但不能接受任何组合器。
不幸的是，由于影子主机的兄弟姐妹不存在于阴影上下文中，所以你不能写出像x-foo[active] + :host之类的东西。因此，我不认为你能在阴影环境下完成你想做的事情。（当然，在轻量级上下文中，您只需编写x-foo[active] + x-foo，但这会破坏将CSS预先打包到web组件中的目的。）
我不清楚为什么:host()和:host-context()最初没有被指定为允许复杂选择器，因为如果它们被指定了，那么您刚才所做的就可以工作了。