This information is hard to find. I also used to think it wasn't possible until I did a deep dive into Web Components.
Another way to style elements that are inside the Shadow DOM (from the outside) is to use the `::part(partname)` pseudo-selector, but you need to set the `part="partname"` attribute on elements inside the shadow DOM in order to allow them to be styled from outside with the pseudo-selector.
Another approach I found which is useful when building components which work with slotted template tags is to project the slotted template's content into another slotted element (e.g. a div) provided by the user the from outside. The second slotted element acts as a viewport which holds the component's rendered HTML output. So the component requires the user to provide both a <template slot="item"></template> element and also a <div slot="viewport"></div> element to project the rendered output into. I wrote a post about it:
Another way to style elements that are inside the Shadow DOM (from the outside) is to use the `::part(partname)` pseudo-selector, but you need to set the `part="partname"` attribute on elements inside the shadow DOM in order to allow them to be styled from outside with the pseudo-selector.
Another approach I found which is useful when building components which work with slotted template tags is to project the slotted template's content into another slotted element (e.g. a div) provided by the user the from outside. The second slotted element acts as a viewport which holds the component's rendered HTML output. So the component requires the user to provide both a <template slot="item"></template> element and also a <div slot="viewport"></div> element to project the rendered output into. I wrote a post about it:
https://dev.to/jondubois/web-components-the-template-viewpor...