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 Januar 2020.
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
| Specification |
|---|
| DOM # eventdef-htmlslotelement-slotchange |
| HTML # handler-onslotchange |
Browser-Kompatibilität
Loading…