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

Question

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

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

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

Answer 1

I want to serialize an entire HTML DOM including Shadow DOM trees into a string i.e. including both the shadow host and shadow root in a way that they can be reconstructed.

请注意，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的属性(property)检索完整 html的 shadowRoot .

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

---

I can programatically access the Shadow DOM via .shadowRoot.innerHTML but calling .outerHTML on the entire DOM or using an XMLSerializer does not include the shadowRoot.

您可以使用 .outerHTML调用.host检索 html document 内的元素哪个主机 shadowRoot .

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

shadowRoot然后可以通过创建 <template> 来重建元素，设置 .innerHTML到变量 shadowHTML这是字符串 .treeRoot.innerHTML ;附加新创建的 template元素到 shadowRoot .