DEV Community

Discussion on: How can I get rendered innerHTML that includes Shadow DOM?

Collapse
 
pankajpatel profile image
Pankaj Patel

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: time2hack.com/introduction-to-webc...

and HTML template tagL time2hack.com/introduction-to-webc...

Collapse
 
mpuckett profile image
Michael Puckett

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? πŸ˜…

Collapse
 
pankajpatel profile image
Pankaj Patel

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.