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

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

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

有没有一种方法可以序列化整个HTML文档(包括Shadow 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属性的shadowRoot来检索html的完整shadowRoot。

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

您可以使用.outerHTML上调用的.host来检索html中承载document的元素的shadowRoot。

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

然后可以通过创建shadowRoot元素，将<template>设置为变量.innerHTML来重建shadowHTML，该变量为字符串.treeRoot.innerHTML；将新创建的template元素追加到shadowRoot。