HTMLSlotElement: slotchange-Ereignis
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.
Das slotchange-Ereignis wird bei einer Instanz von HTMLSlotElement (<slot>-Element) ausgelöst, wenn sich die im Slot enthaltenen Knoten ändern.
Hinweis: Das slotchange-Ereignis wird nicht ausgelöst, wenn sich die Kinder eines geschlitzten 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 Ereignis-Handler-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 Abschnitt stammt aus unserem slotchange-Beispiel (siehe es auch live).
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, dann fügen wir einen slotchange-Ereignislistener zum zweiten Slot der Vorlage hinzu – das ist derjenige, dessen Inhalt im Beispiel geändert wird.
Jedes Mal, wenn sich das im Slot eingefügte Element ändert, protokollieren wir einen Bericht in der Konsole, welcher Slot geändert wurde und welches neue Element sich im Slot befindet.
Spezifikationen
| Specification |
|---|
| DOM Standard # eventdef-htmlslotelement-slotchange |
| HTML Standard # handler-onslotchange |
Browser-Kompatibilität
BCD tables only load in the browser