HTMLSlotElement: slotchange Event
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 Instanz von HTMLSlotElement (<slot>-Element) ausgelöst, wenn sich der/die Knoten in diesem Slot ändern.
Hinweis:
Das slotchange-Ereignis wird nicht ausgelöst, wenn sich die Kinder eines geschlitzten Knotens ändern – sondern nur, wenn Sie die tatsächlichen Knoten selbst ändern (z.B. hinzufügen oder löschen).
Um ein slotchange-Ereignis auszulösen, muss man das slot-Attribut setzen oder entfernen.
Dieses Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("slotchange", (event) => { })
onslotchange = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null
Das folgende Snippet stammt aus unserem slotchange-Beispiel (sehen Sie es sich auch live an).
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 <slot>s und fügen dem zweiten Slot der Vorlage — das ist derjenige, dessen Inhalt im Beispiel geändert wird — einen slotchange-Ereignislistener hinzu.
Jedes Mal, wenn sich das im Slot eingefügte Element ändert, protokollieren wir einen Bericht in der Konsole, der angibt, welcher Slot sich geändert hat und was der neue Knoten im Slot ist.
Spezifikationen
| Spezifikation |
|---|
| DOM # eventdef-htmlslotelement-slotchange |
| HTML # handler-onslotchange |