HTMLSlotElement: name-Eigenschaft

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.

Die name-Eigenschaft der HTMLSlotElement-Schnittstelle gibt den Slot-Namen zurück oder setzt ihn. Ein Slot ist ein Platzhalter innerhalb eines Web-Komponenten, den Benutzer mit ihrem eigenen Markup füllen können.

Wert

Ein String.

Beispiele

Der folgende Ausschnitt stammt aus unserem Slotwechsel-Beispiel (Live ansehen).

js
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 dann einen slotchange-Event-Listener zum zweiten Slot im Template hinzu — das ist der Slot, dessen Inhalt im Beispiel immer wieder geändert wird.

Jedes Mal, wenn das Element im Slot geändert wird, protokollieren wir einen Bericht in die Konsole, der angibt, welcher Slot sich geändert hat und welches neue Element sich im Slot befindet.

Spezifikationen

Specification
HTML Standard
# dom-slot-name-dev

Browser-Kompatibilität

BCD tables only load in the browser