HTMLSlotElement: slotchange-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Das slotchange-Ereignis wird auf einer HTMLSlotElement-Instanz (einem <slot>-Element) ausgelöst, wenn sich die in diesem Slot enthaltenen Knoten ändern.
Hinweis:
Das slotchange-Ereignis wird nicht ausgelöst, wenn sich die Kindknoten eines einem Slot zugewiesenen Knotens ändern – nur, wenn Sie die zugewiesenen Knoten selbst ändern (z. B. hinzufügen oder entfernen).
Um ein slotchange-Ereignis auszulösen, müssen Sie das slot-Attribut setzen oder entfernen.
Dieses Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("slotchange", (event) => { })
Alternativ können Sie der Event-Handler-Eigenschaft des Interfaces einen Wert zuweisen:
onslotchange = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null
Der folgende Ausschnitt stammt aus unserem slotchange-Beispiel (auch 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 auf alle <slot>-Elemente und fügen dann dem zweiten Slot des Templates einen slotchange-Event-Listener hinzu. In diesem Slot ändert sich im Beispiel der Inhalt.
Jedes Mal, wenn sich das in den Slot eingefügte Element ändert, geben wir auf der Konsole aus, welcher Slot sich geändert hat und welcher Knoten sich nun darin befindet.
Spezifikationen
| Spezifikation |
|---|
| DOM # eventdef-htmlslotelement-slotchange |
| HTML # handler-onslotchange |