In the new v1 web ponents 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

In the new v1 web ponents 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

• javascript
• html
• css
• web-ponent

• Can you try .a:host and :host('.a')? Can you give the exact css and an example of what the element looks like? From my reading it seems like it is a pseudo-class and pseudo-classes can appear anywhere in a sequence of simple selectors. Also what browser are you using, and does it specify it supports it? – Jason Goemaat Commented Aug 18, 2017 at 4:24
• I tried doing .a:host and :host('.a') but neither worked. – omega Commented Aug 18, 2017 at 4:29
• Are you using chrome? If not this question will explain why its not working stackoverflow./questions/25468701/… – Carl Pease Commented Aug 18, 2017 at 4:29
• I am using latest version of chrome actually. – omega Commented Aug 18, 2017 at 4:29
• this worked :host(.a) – omega Commented Aug 18, 2017 at 4:48

2 Answers 2

As per the documentation:

For example, say you had a ponent 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 mented, that would, in this case, translate to:

:host(.a) {
    ...
}

Maybe this shouldn't work, but for me it does