HTMLSlotElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Das HTMLSlotElement Interface der Shadow DOM-API ermöglicht den Zugriff auf den Namen und die zugeordneten Knoten eines HTML <slot> Elements.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seiner Eltern-Schnittstelle, HTMLElement.

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

Instanz-Methoden

Erbt auch Methoden von seiner Eltern-Schnittstelle, 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 flatten-Option auf true gesetzt ist, gibt sie eine Sequenz sowohl der Knoten zurück, die diesem Slot zugewiesen sind, als auch der Knoten, die jedem anderen Slot zugewiesen sind, der Nachfahrer dieses Slots ist. Wenn keine zugewiesenen Knoten gefunden werden, gibt sie den Fallback-Inhalt des Slots zurück.
HTMLSlotElement.assignedElements(): Gibt eine Sequenz der Elemente zurück, die diesem Slot zugewiesen 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 zugewiesen sind, als auch der Elemente, die jedem anderen Slot zugewiesen sind, der Nachfahrer dieses Slots ist. Wenn keine zugewiesenen Elemente gefunden werden, gibt sie den Fallback-Inhalt des Slots zurück.

Ereignisse

Erbt auch Ereignisse von seiner Eltern-Schnittstelle, HTMLElement.

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

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

Beispiele

Der folgende Ausschnitt 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 zu allen Slots zu und fügen dem zweiten Slot im Template einen slotchange-Ereignis-Listener hinzu — welcher der Slot ist, dessen Inhalt im Beispiel ständig geändert wird.

Jedes Mal, wenn sich das im Slot eingefügte Element ändert, wird ein Bericht an die Konsole protokolliert, der angibt, welcher Slot sich geändert hat und was der neue Knoten im Slot ist.

Spezifikationen

Specification
HTML # htmlslotelement