HTMLSlotElement

Instanz-Eigenschaften

Erbt auch Eigenschaften von seiner Elternschnittstelle, HTMLElement.

HTMLSlotElement.name

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

Instanz-Methoden

Erbt auch Methoden von seiner Elternschnittstelle, HTMLElement.

HTMLSlotElement.assign()

Legt die manuell zugeordneten Knoten für diesen Slot auf die angegebenen Knoten fest.

HTMLSlotElement.assignedNodes()

Gibt eine Sequenz der Knoten zurück, die diesem Slot zugeordnet sind. Wenn die flatten-Option auf true gesetzt ist, gibt sie eine Sequenz sowohl der Knoten zurück, die diesem Slot zugeordnet sind, als auch der Knoten, die irgendwelchen anderen Slots zugeordnet sind, die Nachkommen dieses Slots sind. Wenn keine zugeordneten Knoten gefunden werden, gibt sie den Fallback-Inhalt des Slots zurück.

HTMLSlotElement.assignedElements()

Gibt eine Sequenz der Elemente zurück, die diesem Slot zugeordnet sind (und keine anderen Knoten). Wenn die flatten-Option auf true gesetzt ist, gibt sie eine Sequenz sowohl der Elemente zurück, die diesem Slot zugeordnet sind, als auch der Elemente, die irgendwelchen anderen Slots zugeordnet sind, die Nachkommen dieses Slots sind. Wenn keine zugeordneten Elemente gefunden werden, gibt sie den Fallback-Inhalt des Slots zurück.

Ereignisse

Erbt auch Ereignisse von seiner Elternschnittstelle, HTMLElement.

Diese Ereignisse können mit addEventListener() abgehört werden oder indem ein Ereignis-Listener der oneventname-Eigenschaft dieser Schnittstelle zugewiesen wird.

slotchange

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

Beispiele

Das folgende Snippet stammt aus unserem slotchange-Beispiel (siehe es auch live).

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 greifen wir auf Referenzen aller Slots zu, dann fügen wir dem zweiten Slot in der Vorlage einen slotchange-Ereignis-Listener hinzu – das ist derjenige, dessen Inhalte im Beispiel ständig geändert werden.

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

Spezifikationen

Browser-Kompatibilität