提取扁平化的工具 DOM

Question

较新浏览器中的 DevTools 显示光影 DOM。但是似乎缺少的是 "Copy flatten DOM" 捕获 #shadow-root 以及根元素。

我已经整理了如何，例如，在DevTools中显示阴影DOM，但是Copy Element只复制光DOM。

有什么建议吗？

Answer 1

1) 将 shadowRoot.innerHTML 复制到 <template> 元素中。

2）对于每个<slot>元素，通过assignedNodes()方法获取分发的内容，并用它替换<slot>（用replaceChild()）

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>

提取扁平化的工具 DOM

Tool to extract flatten DOM

dom

shadow-dom