HTMLSlotElement

Erbt auch Eigenschaften von seinem Eltern-Interface, HTMLElement.

HTMLSlotElement.name

Ein String, der verwendet wird, um den Namen des Slots zu erhalten und zu setzen.

Erbt auch Methoden von seinem Eltern-Interface, HTMLElement.

HTMLSlotElement.assign()

Setzt die manuell zugewiesenen Knoten für diesen Slot auf die angegebenen Knoten.

HTMLSlotElement.assignedNodes()

Gibt eine Sequenz der Knoten zurück, die diesem Slot zugewiesen sind. Wenn die Option flatten auf true gesetzt ist, wird eine Sequenz sowohl der diesem Slot zugewiesenen Knoten als auch der Knoten zurückgegeben, die anderen Slots zugewiesen sind, die Nachkommen dieses Slots sind. Wenn keine zugewiesenen Knoten gefunden werden, wird der Ersatzinhalt des Slots zurückgegeben.

HTMLSlotElement.assignedElements()

Gibt eine Sequenz der diesem Slot zugewiesenen Elemente zurück (und keine anderen Knoten). Wenn die Option flatten auf true gesetzt ist, wird eine Sequenz sowohl der diesem Slot zugewiesenen Elemente als auch der Elemente zurückgegeben, die anderen Slots zugewiesen sind, die Nachkommen dieses Slots sind. Wenn keine zugewiesenen Elemente gefunden werden, wird der Ersatzinhalt des Slots zurückgegeben.

Erbt auch Ereignisse von seinem Eltern-Interface, HTMLElement.

Hören Sie auf diese Ereignisse, indem Sie addEventListener() verwenden oder einen Ereignis-Listener der oneventname-Eigenschaft dieses Interfaces zuweisen.

slotchange

Wird auf einer HTMLSlotElement-Instanz (dem <slot>-Element) ausgelöst, wenn sich die in diesem Slot enthaltenen Knoten ändern.

Der folgende Ausschnitt stammt aus unserem Beispiel für slotchange (sehen Sie es sich auch live an).

let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

Hier holen wir Referenzen zu allen Slots und fügen einen slotchange-Ereignis-Listener zum zweiten Slot im Template hinzu – welcher derjenige ist, dessen Inhalt im Beispiel ständig geändert wird.

Jedes Mal, wenn sich das im Slot eingefügte Element ändert, protokollieren wir einen Bericht in die Konsole, welcher Slot sich geändert hat und was der neue Knoten im Slot ist.