Zugriff auf das Host-Element aus dem Schattenstamm mit Shadow DOM v1?

Question

Wie erhalten Sie ein Element, das in einer Schattenwurzel enthalten ist, zu dem Element, das die genannte Schattenwurzel enthält? Gibt es einen einzigen Weg, um dies zu erreichen, unabhängig davon, wo sich ein Element in der Struktur befindet (d. H. Einen Verweis auf entweder element2 oder element3, erhalten Sie den Verweis auf element1)?

element1 
└ #shadow-root 
    └ element2 
    └ element3 

Answer 1

für Shadow DOM v1, können Sie die getRootNode() Methode verwenden.

Dann erhalten die host Attribut:

event.target.getRootNode().host 

Answer 2

können Sie halten parentNode laufen, bis Sie den Schatten Wurzel, und dann host bekommen.

function getHostElement(el) { 
    while (el.parentNode) el = el.parentNode; 
    return getShadowRoot(el).host; 
} 
var element1 = document.createElement('element1'); 
var element2 = document.createElement('element2'); 
var element3 = document.createElement('element3'); 
element2.appendChild(element3); 
var shadowRoot = element1.createShadowRoot(); 
shadowRoot.appendChild(element2); 
getHostElement(element3); // element1