Question

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

我已经整理出如何在DevTools中显示阴影DOM，但复制元素只复制轻型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的工具

1 个答案: