javascript - 如何选择:host with a class in css for web components?

Question

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

谢谢

Answer 1

根据 documentation :

For example, say you had a component with a shadow tree like the following:

<x-foo class="foo">
    <"shadow tree">
        <div class="foo">...</div>
    </>
</x-foo>

For a stylesheet within the shadow tree:

• ...
• ':host(.foo)' matches the <x-foo> element.

正如 OP 评论的那样，在这种情况下，这将转化为:

:host(.a) {
    ...
}