如何序列化包含Shadow DOM的HTML DOM？

Question

我希望将包含Shadow DOM树的整个HTML DOM序列化为一个字符串，即包含阴影主机和阴影根，以便可以重建它们。

我可以通过.shadowRoot.innerHTML以编程方式访问Shadow DOM，但在整个DOM上调用.outerHTML或使用XMLSerializer不包含shadowRoot。

有没有办法序列化整个HTML文档，包括Shadow DOM树？

Answer 1

  

我想将包含Shadow DOM树的整个HTML DOM序列化   一个字符串，即在某种程度上包括阴影主机和阴影根   他们可以重建。

注意，shadowRoot个节点不可克隆;虽然您应该能够迭代childNodes shadowRoot来检索.nodeValue中每个节点的.innerHTML或shadowRoot。

var elems = document.getElementById("host").shadowRoot.childNodes;
var shadowHTML = "";
for (var i = 0; i < elems.length; i++) {
  shadowHTML += elems[i].nodeValue || elems[i].outerHTML;
}

或者，您可以将.innerHTML链接到.treeRoot的{​​{1}}属性，以检索shadowRoot的完整html。

shadowRoot

  

我可以通过.shadowRoot.innerHTML以编程方式访问Shadow DOM   但是在整个DOM上调用.outerHTML或使用XMLSerializer   不包括shadowRoot。

您可以使用var shadowHTML = document.getElementById("host").shadowRoot.treeRoot.innerHTML; 上的.outerHTML来检索.host中托管html的{​​{1}}元素。

document

然后可以通过创建shadowRoot元素重新构建var host = document.getElementById("host").shadowRoot.host.outerHTML; ，将shadowRoot设置为变量<template>，即字符串.innerHTML;将新创建的shadowHTML元素附加到.treeRoot.innerHTML。