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 HTMLSlotElement-Instanz (<slot> Element) ausgelöst, wenn sich die in diesem Slot enthaltenen Node(s) ändern.
Hinweis:
Das slotchange Ereignis wird nicht ausgelöst, wenn sich die Kinder eines geslotteten Nodes ändern — nur wenn Sie die tatsächlichen Nodes 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 ist nicht abbruchbar.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.
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 (Live-Demo 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 greifen wir auf alle <slot> Elemente zu und fügen dann dem zweiten Slot der Vorlage einen slotchange Ereignislistener hinzu — das ist der Slot, dessen Inhalt im Beispiel geändert wird.
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 neue Node im Slot enthalten ist.
Spezifikationen
| Specification |
|---|
| DOM # eventdef-htmlslotelement-slotchange |
| HTML # handler-onslotchange |