Shadow DOMを含むHTML DOMを直列化するにはどうすればいいですか？

Question

Shadow DOMツリーを含むHTML DOM全体を文字列に直列化したい、つまりシャドウホストとシャドウルートの両方を再構築できるようにしたい。

シャドーDOMには.shadowRoot.innerHTMLを使用してプログラムでアクセスできますが、DOM全体で.outerHTMLを呼び出すか、XMLSerializerを使用してshadowRootを呼び出すことはできません。

シャドウDOMツリーを含むHTMLドキュメント全体をシリアル化する方法はありますか？

Answer 1

私は に、すなわち、彼らは再構築することができるような方法 で影のホストとシャドウルートの両方を含む文字列をシャドウDOMツリーを含む全体のHTMLのDOMをシリアライズしたいです。

注：shadowRootノードはクローン可能ではありません。 shadowRootの各ノードの.nodeValueまたは.innerHTMLを取得するには、childNodesを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; 
} 

別の方法としては、shadowRootのフルhtmlを取得するためにshadowRootの.treeRootプロパティに連鎖.innerHTMLを呼び出すことができます。

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

---

私はプログラム的に.shadowRoot.innerHTML 経由シャドウDOMにアクセスすることができますが、全体のDOMに.outerHTMLを呼び出すかのXmlSerializer を使用すると、shadowRootが含まれていません。

あなたはshadowRootをホストdocument内の要素のhtmlを取得するために.hostに呼びかけ.outerHTMLを使用することができます。

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

shadowRoot次いで、<template>要素を作成ストリング.treeRoot.innerHTMLある変数shadowHTMLに.innerHTMLを設定することによって再構成することができます。新しく作成されたtemplate要素をshadowRootに追加します。