我想将包括影子 DOM 树在内的整个 HTML DOM 序列化为一个字符串,即以可以重构的方式同时包含影子主机和影子根。
我可以通过 .shadowRoot.innerHTML 以编程方式访问 Shadow DOM,但在整个 DOM 上调用 .outerHTML 或使用 XMLSerializer 不包括 shadowRoot。
有没有办法序列化整个 HTML 文档,包括 Shadow DOM 树?
最佳答案
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
.
关于javascript - 如何序列化包含 Shadow DOM 的 HTML DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37016564/