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 Instanz des HTMLSlotElement (<slot>-Element) ausgelöst, wenn sich die in diesem Slot enthaltenen Knoten ändern.
Hinweis:
Das slotchange-Ereignis wird nicht ausgelöst, wenn sich die Kinder eines geschachtelten Knotens ändern — nur wenn Sie die tatsächlichen Knoten selbst ändern (z.B. hinzufügen oder löschen).
Um ein slotchange-Ereignis auszulösen, muss das slot-Attribut gesetzt oder entfernt werden.
Dieses Ereignis ist nicht abbruchfähig.
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
Der folgende Ausschnitt 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 ein und fügen dem zweiten Slot der Vorlage — demjenigen, dessen Inhalt im Beispiel geändert wird — einen slotchange-Ereignislistener hinzu.
Jedes Mal, wenn sich das in den Slot eingefügte Element ändert, protokollieren wir einen Bericht in der Konsole, der angibt, welcher Slot sich geändert hat und welches das neue Element im Slot ist.
Spezifikationen
| Spezifikation |
|---|
| DOM # eventdef-htmlslotelement-slotchange |
| HTML # handler-onslotchange |