Wondering if it’s possible to style the shadow root container? I have these attached to a parent custom element, and would like the custom element to always carry a
Instead of adding this to the document’s CSS, I would like to encapsulate this into the template attached to the component. But shadow root isn’t quite an HTMLElement, so is the only way to add a
<div> inside the template that acts as the container, and style that
The closest thing is probably using the
:host CSS selector. Using
:root inside the shadow DOM does not get to a
document as there is none inside the shadow DOM, and the selector is not allowed to ascend out of the shadow DOM encapsulation.
Hint: if your
host doesn’t have
display: inline-block it may not apply
border as you expected.
Answered By – David Min