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

【问题标题】：How to serialize an HTML DOM including Shadow DOM?如何序列化包含 Shadow DOM 的 HTML DOM？
【发布时间】：2016-08-29 05:34:44
【问题描述】：

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

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

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

【问题讨论】：

你能把你在 Question 中尝试过的html、js 包括进来吗？

标签： javascript html dom shadow-dom

【解决方案1】：

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

注意，shadowRoot 节点不可克隆；尽管您应该能够迭代shadowRoot 的childNodes 以检索shadowRoot 中每个节点的.nodeValue 或.innerHTML。

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

或者，您可以调用链接到shadowRoot 的.treeRoot 属性的.innerHTML 以检索shadowRoot 的完整html。

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

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

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

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

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

【讨论】：