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.
Top comments (4)
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...
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:
github.com/w3c/DOM-Parsing/issues/58