Skip to content

How can I get rendered innerHTML that includes Shadow DOM?

twitter logo github logo ・1 min read  

I'm using web components with shadow DOM on a project and I would like to copy the innerHTML of the page as rendered.

I think I need to write a function loops over each DOM node and gets either the shadow DOM children if available or else the light DOM children.

node.shadowRoot ? node.shadowRoot.children : node.children

I've been having trouble getting it right, and I'm surprised I can't find anything on Google.

twitter logo DISCUSS (4)
markdown guide

I am still wondering why do you need to copy innerHTML to stadowRoot.

If it is already rendered then why do you need to copy the innerHTML; and if you are passing HTML as template, then you should make use of template tag. See how to use shadowDom here:

and HTML template tagL


I’m building a tool that parses the page HTML and does static checking for accessibility, SEO, etc. Right now it’s only getting the light DOM, no shadow DOM. So if there is a top level web component which has many nested web components inside its shadow root, none of the shadow DOM elements will be there. So I need an alternative that gets the shadow DOM children instead and returns a string of rendered HTML.

Make sense? 😅


Makes sense. Though now it depends on how you are getting the HTML page which has all the webcomponents.

ShadowDOM exists in DOM, so if it is a scraped page, shadowRoot will not have any elements inside it.

Another fact to consider is that web components with shadowDOM might be created with closed mode; in that case, you can not access the inner DOM of shadowDOM.


Update: I opened an issue for this with W3C because I think it should be available natively. Check it out and weigh in here:

Classic DEV Post from Feb 7

What are your favorite portfolio sites for devs?

I'm looking for some portfolio site inspiration! I'd love to see your favorite sites by other develop...

Michael Puckett profile image

Don't ghost on us ❤️