Search code examples
javascripthtmlcssweb-component

How to select :host with a class in css for web components?

In the new v1 web components specs, you can use :host to target the custom element. But then I attached a class A to the custom element, and had a css selector :host.A, but its styles are not being applied. Does anyone know how to fix this?

Thanks

Solution

  • As per the 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.

    As OP has commented, that would, in this case, translate to:

    :host(.a) {
    ...
}