The shadow DOM specification is currently still in development, most of its functionality is radically changing from one moment to the next.
To style a shadow DOM element from the outside it depends on if your browser relies on the (outdated) peusdo-element exposure or the new css shadow dom selectors ^^
(cat) and ^
(hat)
If the browser supports the new syntax, you can simply enter an elements shadow dom using the hat (^
) selector, or if you wish to cross all shadow boundaries, you can use the cat (^^
) selector to do so.
If the browser does not yet support it, you need to expose the element you wish to style as a pseudo-element of its parent by adding the pseudo attribute to it, <shadow-element peusdo="myname" />
, and then reference that pseudo element in your css shadow-host::myname
As to your 'bonus' question, you are referencing the shadow host element, but only if the shadow host is a <bar>
element, if you omit the second :host
you are referencing a shadow host that is a <bar>
element or has one as its ancestor.
Do note that because the API is in constant development, the above information may not remain reliable beyond more then a month or so.