用于提取平坦DOM的工具

较新浏览器中的DevTools显示光和影DOM。但似乎缺少的是一个“复制展平DOM”，它捕获

#shadow root

以及根元素

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

任何提示？

1）在

元素中复制

shadowRoot.innerHTML

2） 对于每个

元素，使用

assignedNodes（）

方法获取分布式内容，并用它替换

（使用

replaceChild（）

）

var sh=host.attachShadow（{mode:'open'}）
sh.innerHTML=`阴影DOM内容：`
功能插槽内容（插槽）
{
var frag=document.createDocumentFragment（）
var nodes=slot.assignedNodes（{flatten:true}）
for（让节点中的节点）
{
frag.appendChild（node.cloneNode（true））
}
回程碎片
}
函数展平（）
{
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'））
用于（插槽中的var i）
{
var frag=slotContent（插槽[i]）
slots2[i].parentNode.replaceChild（frag，slots2[i]）
}	
console.log（template.innerHTML）
}

分布式节点
展平