如何序列化包括影子 DOM 在内的 HTML DOM

How to serialize an HTML DOM including Shadow DOM?

本文关键字：DOM HTML 影子 序列化 包括      更新时间：2023-09-26

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

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

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

我想将整个HTML DOM(包括影子DOM树(序列化为 一个字符串，即以某种方式包含影子主机和影子根 它们可以重建。

请注意，shadowRoot节点不可克隆;尽管您应该能够迭代childNodes shadowRoot以检索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;
}

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

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

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

您可以使用在.host上调用.outerHTML来检索document中托管shadowRoot元素html。

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

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

相关文章：