Tool to extract flatten DOM - dom

Question

DevTools in newer browsers display the light and shadow DOM. But what seems to be missing is a "Copy flatten DOM" that captures the #shadow-root along with the root elements.
I've sorted out how to, for example, display the shadow DOM in DevTools, but Copy Element only copies the light DOM.
Any tips?

Answer 1

1) Copy the shadowRoot.innerHTML in a <template> element.
2) For each <slot> element, get the distributed content with the assignedNodes() method and replace the <slot> (with replaceChild()) by it.
var sh = host.attachShadow({mode:'open'})
sh.innerHTML = `<h4>Shadow DOM</h4> Content: <div><slot name="node1"></slot></div>`
function slotContent( slot )
{
var frag = document.createDocumentFragment()
var nodes = slot.assignedNodes( { flatten:true } )
for ( let node of nodes )
{
frag.appendChild( node.cloneNode( true ) )
}
return frag
}
function flatten()
{
var template = document.createElement( 'template' )
template.innerHTML = host.shadowRoot.innerHTML
var slots = Array.from( host.shadowRoot.querySelectorAll( 'slot' ) )
var slots2 = Array.from( template.content.querySelectorAll( 'slot' ) )
for ( var i in slots )
{
var frag = slotContent( slots[i] )
slots2[i].parentNode.replaceChild( frag, slots2[i] )
}
console.log( template.innerHTML )
}
<div id=host>
<span slot=node1>Distributed Node</span>
</div>
<button onclick=flatten()>Flatten</button>