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

Question

我想将包括Shadow DOM树在内的整个HTML DOM序列化为一个字符串，即以可重构方式同时包括shadow主机和shadow根。

我可以通过.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;
}

或者，您可以调用.innerHTMLchained to .treeRootproperty ofshadowRoot来检索完整html的shadowRoot.

var shadowHTML = document.getElementById("host").shadowRoot.treeRoot.innerHTML;

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

您可以使用.outerHTML调用.host来检索主机html中的元素。documentshadowRoot

var host = document.getElementById("host").shadowRoot.host.outerHTML;

然后可以通过创建一个元素并设置为string变量来shadowRoot重建；将新创建的元素附加到.<template>.innerHTMLshadowHTML.treeRoot.innerHTMLtemplateshadowRoot