How to copy the HTML of a web page composed of custom elements
How to compare two DOMs including multiple shadow roots and slots
Sometimes it is desirable to have a local copy of the HTML of some web page, for example as the input for tests.
But it is not always straightforward to copy HTML of a web page or an element. Modern websites tend to be build of custom elements. And a custom element is typically a shadow host. innerHTML or outerHTML properties of shadow hosts return HTML of the direct children but disregard the HTML of the contained shadow DOM.
Similarly, Copy outerHTML action in in the Elements panel of the DevTools cannot yet produce HTML with declarative shadow roots. For example, a popular website for developers https://chromestatus.com/ is built of nested custom elements. chromedash-app, the first child element of the body hosts a shadow DOM with multiple nested elements:
I try to copy the HTML of https://chromestatus.com/feature/5084403030818816 page body:
