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 Januar 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).
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 # dom-slot-name-dev |
Browser-Kompatibilität
Loading…