Wie wird ein HTML DOM mit Shadow DOM serialisiert?

Question

Ich möchte ein gesamtes HTML-DOM einschließlich Schatten-DOM-Bäume in eine Zeichenfolge serialisieren, d. H. Sowohl den Schatten-Host als auch den Schatten-Stamm, so dass sie rekonstruiert werden können.

Ich kann programmgesteuert auf das Shadow-DOM über .shadowRoot.innerHTML zugreifen, aber den Aufruf von .outerHTML für das gesamte DOM oder die Verwendung eines XMLSerializer enthält das shadowRoot nicht.

Gibt es eine Möglichkeit, das gesamte HTML-Dokument einschließlich Shadow-DOM-Bäume zu serialisieren?

Answer 1

Ich möchte eine ganze HTML-DOM einschließlich Schatten DOM Bäume in eine Zeichenfolge serialisiert das heißt einschließlich der Schatten Host und Schatten Wurzel in einer Art und Weise , dass sie rekonstruiert werden können.

Hinweis, shadowRoot Knoten sind nicht klonierbar; obwohl Sie childNodes von shadowRoot iterieren können, um .nodeValue oder .innerHTML jedes Knotens innerhalb shadowRoot abzurufen.

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

Alternativ können Sie .innerHTML zu .treeRoot Eigentum shadowRoot gekettet nennen voll html von shadowRoot abzurufen.

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

---

ich den Schatten DOM über .shadowRoot.innerHTML programmatisch zugreifen können aber .outerHTML auf das gesamte DOM oder unter Verwendung eines XMLSerializer beinhaltet nicht die shadowRoot aufrufen.

können Sie .outerHTML auf .host genannt verwenden html des Elements abzurufen innerhalb document die shadowRoot hostet.

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

Die shadowRoot kann dann durch die Schaffung eines <template> Element rekonstruiert werden, das Setzen von .innerHTML variable shadowHTML die Zeichenfolge .treeRoot.innerHTML; Das neu erstellte Element template an eine shadowRoot anhängen.