Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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.

js
addEventListener("slotchange", (event) => { })

onslotchange = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

js
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).

js
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

Siehe auch

HTMLSlotElement