Kann ich auf benutzerdefinierte HTML-Tag <component> oder <slot> Inhalt

Question

Sagen wir, ich möchte eine benutzerdefinierte HTML-Element schaffen, wie zum Beispiel:

<video-container> 
    <video></video> 
</video-container> 

So erstelle ich eine Vorlage wie folgt aus:

<div class="wrapper"> 
    etc.. 
    <content></content> 
</div> 

Dann habe ich Fügen Sie es über einen HTML-Elementprototyp createdCallback an die Seite an.

Innerhalb dieser Rückruf ich in der Lage sein wollen Zuhörer auf das video Element zu befestigen, damit ich Sachen auf play tun können, pause etc .. Es ist mir nicht klar, ob es überhaupt das Video-Tag in weitergegeben zuzugreifen ist. Ich kann Zugriff auf das Tag content erhalten, es werden jedoch keine untergeordneten Knoten angezeigt. Ist das möglich?

Ich kann auf das Videoelement zugreifen, wenn ich nur das ganze Dokument ergreife und das Videoelement bekomme, aber das ist hässlich, weil ich nur das Video-Tag im Rahmen des vorliegenden benutzerdefinierten Elements bekommen möchte.

Answer 1

direkte Weg

Sie es mithilfe querySelector auf dem benutzerdefinierten Element selbst zugreifen sollte:

VideoContainerPrototype.createdCallback = function() 
{ 
    var video1 = this.querySelector('video') 
} 

Sie müssen durch den Schatten DOM nicht passieren.

---

Schatten Weg

Aber wenn man es aus dem Schatten Wurzel bekommen möchten, können Sie die assignedNodes() Methode auf Ihrem <slot> Element (früher getDistributedNodes() auf <content>) verwenden:

var video2 = this.shadowRoot.querySelector('slot').assignedNodes()[1] 

Es wird ein Array von Knoten zurückgegeben, die eingefügt wurden. Da in Ihrem Beispiel ein Textknoten im Index [0] vorhanden ist, müssen Sie den Knoten unter [1] abrufen.

Hinweis: Sie können auch benannte Steckplätze verwenden, wenn Sie Ihr-Element auf Index [0] setzen möchten.