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
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) {
...
}
Maybe this shouldn't work, but for me it does😬:
:host-context(.dialog) .overlay { background: green; }
for a class, directly attached to the template (not something higher up)
<my-component class='dialog><div class='overlay'></div></my-component>
.a:hostand: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?.a:hostand:host('.a')but neither worked.