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

Question

我想將整個HTML DOM（包括Shadow DOM樹）序列化為一個字符串，即包含陰影主機和陰影根，以便可以重建它們。

我可以通過.shadowRoot.innerHTML以編程方式訪問Shadow DOM，但是在整個DOM上調用.outerHTML或使用XMLSerializer不包括shadowRoot。

有沒有辦法序列化整個HTML文檔，包括Shadow DOM樹？

Answer 1

我想將整個HTML DOM（包括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;

---

我可以通過.shadowRoot.innerHTML以編程方式訪問Shadow DOM，但是在整個DOM上調用.outerHTML或使用XMLSerializer不包括shadowRoot。

您可以使用.outerHTML調用.host來檢索托管shadowRoot document中的元素的html 。

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

然后可以通過創建<template>元素重建shadowRoot ，將.innerHTML設置為變量shadowHTML ，即字符串.treeRoot.innerHTML ; 將新創建的template元素附加到shadowRoot 。