如何为 Web 组件选择带有 CSS 类的主机？答案

【问题标题】：How to select :host with a class in css for web components?如何为 Web 组件选择带有 CSS 类的主机？
【发布时间】：2020-04-29 01:26:35
【问题描述】：

在新的 v1 Web 组件规范中，您可以使用 :host 来定位自定义元素。但是后来我在自定义元素上附加了一个类A，并有一个css选择器:host.A，但它的样式没有被应用。有谁知道如何解决这个问题？

谢谢

【问题讨论】：

你能试试.a:host和:host('.a')吗？你能给出确切的css和一个元素看起来像什么的例子吗？从我的阅读来看，它似乎是一个pseudo-class，而伪类可以在一系列简单的选择器中出现anywhere。另外您使用的是什么浏览器，它是否指定它支持它？
我试过 .a:host 和 :host('.a') 但都没有成功。
你在用chrome吗？如果不是这个问题将解释为什么它不起作用stackoverflow.com/questions/25468701/…
我实际上使用的是最新版本的 chrome。
这行得通：host(.a)

标签： javascript html css web-component

【解决方案1】：

根据documentation：

例如，假设您有一个带有shadow tree 的组件，如下所示：
<x-foo class="foo">
    <"shadow tree">
        <div class="foo">...</div>
    </>
</x-foo>
对于影子树中的样式表：

...

':host(.foo)' 匹配 <x-foo> 元素。

正如 OP 所说，在这种情况下，这将转化为：

:host(.a) {
    ...
}

【讨论】：

【解决方案2】：

也许这不应该起作用，但对我来说确实如此?：

:host-context(.dialog) .overlay { background: green; }

对于一个类，直接附加到模板（不是更高的东西）

<my-component class='dialog><div class='overlay'></div></my-component>

【讨论】：