如何使用影子 DOM 附加样式表根据子节点选择器设置自定义 HTML 元素的样式？

Question

我有一个自定义 HTML 元素，可以对

button

元素进行分组：

<custom-element>
    <button>Foo</button>
    <button>Bar</button>
    <button>Baz</button>
</custom-element>

我使用

ShadowRoot.adoptedStylesheets

将样式表链接到元素（这意味着样式表属于影子 DOM，如果我能够在这里正确地表达自己的话）。

button

是“开槽”的（分配给影子树中的

slot

元素）。

我在自定义元素的影子树中有一个“提示”元素：

<span class="prompt">Use one of the following button(s)</span> 

我想根据

button

的所有

custom-element

子元素是否设置了

hidden

属性来切换上述元素的显示 - 如果 all 按钮被隐藏，则提示不得显示(

display: none

)，否则为(

display: revert

)。

默认隐藏

.prompt

——假设只有

hidden

按钮，很简单：

.prompt { display: none; }

但是，我无法编写一个执行相反操作的选择器 - 当至少一个

.prompt

不是

button

时显示

hidden

。

我尝试了很多规则，但似乎都不适用（我有半个月前的 Firefox、Edge 和 Chrome 版本）：

:host(:has(::slotted(button:not([hidden])))) .prompt {
    display: revert;
}

:host(:has(button:not([hidden]))) .prompt {
    display: revert;
}

:host(:has(::slotted(button:not([hidden])))) .prompt {
    display: revert;
}

是否可以根据应用于轻量 DOM 树上的自定义元素的谓词，沿着 Shadow 树的分支选择自定义元素的后代，特别是“包含

button

不具有

hidden

属性”？

问题似乎出在

:has

选择器上——我无法对任何

:host(:has(...))

使用

...

。例如，我看到提到

:host

是 featureless，但

:host .prompt

按预期工作，因此我对

:host

或

:host(...)

选择的到底具有哪些功能感到进一步困惑。

无论如何，我很好奇我眼前的实际问题——CSS 能够单独解决这个问题吗？否则，我使用

ResizeObserver

来响应元素边界框的变化，将这些作为按钮上

hidden

属性切换的间接标志。这不是一个糟糕的选择，但理想情况下我希望 CSS 单独来做到这一点。

Answer 1

:host

（在shadowDOM内部）选择元素本身，

:host .prompt

选择元素insideshadowDOM

:host(x)

选择元素上的属性

您将无法到达那里的按钮（在 lightDOM 中）

我不是 CSS 大师，不认为可以用 CSS 来完成
+ 匹配2个兄弟姐妹，你不能匹配3个？

让元素注册 one 单击处理程序并查询 3 个按钮，在元素上设置属性以便可以使用 ShadowDOM 中的 CSS，不是更容易吗