Is it possible for a parent document to read the content of Shadow DOM elements?

Question

I'd like to run a bookmarklet to capture the current state of a document (web page) as HTML. The document is built using Polymer, so most of the elements are inside shadow roots, which means that their contents are not included in the output of document.body.innerHTML.

Is it possible to export a JavaScript-generated document as HTML, including the content of Shadow DOM elements?

Answer 1

What you want is to capture the composed/rendered dom tree. Here are a few examples of doing this that may be useful:

• Polymer's inspector (type sinspect() in the console on a page using polymer) - code
• Shadow DOM visualizer - code

The latter shows the <content>, which is probably not what you want. But you could easily modify it to only contain the rendered nodes.