Is it possible to style the shadow root container itself?

Issue

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 margin: 5px.

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 <div> instead?

Solution

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 background or border as you expected.

Answered By – David Min

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published