dom - 提取扁平化 DOM 的工具

Question

较新浏览器中的 DevTools 显示光影 DOM。但似乎缺少的是“复制扁平 DOM”，它捕获 #shadow-root 以及根元素。

我已经整理出了如何在 DevTools 中显示 Shadow DOM，但复制元素仅复制 light 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>