如何为 Web 组件选择 :host 和 css 中的类？

Question

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

谢谢

Answer 1

根据文档：

例如，假设您有一个带有影子树的组件，如下所示：

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

对于影子树中的样式表：

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

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

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