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 auf einer Instanz des HTMLSlotElement (<slot>-Element) ausgelöst, wenn sich die Knoten ändern, die in diesem Slot enthalten sind.
Hinweis:
Das slotchange-Ereignis wird nicht ausgelöst, wenn sich die Kinder eines eingeschlitzten 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 das slot-Attribut gesetzt oder entfernt werden.
Dieses Ereignis kann nicht abgebrochen werden.
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 Ausschnitt 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 ein und fügen dann dem zweiten Slot der Vorlage — welcher im Beispiel seine Inhalte geändert bekommt — einen slotchange-Ereignislistener hinzu.
Jedes Mal, wenn sich das in den Slot eingefügte Element ändert, protokollieren wir einen Bericht in die Konsole, der angibt, welcher Slot sich geändert hat und was der neue Knoten innerhalb des Slots ist.
Spezifikationen
| Specification |
|---|
| DOM # eventdef-htmlslotelement-slotchange |
| HTML # handler-onslotchange |