HTMLSlotElement : événement slotchange

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨janvier 2020⁩.

L'évènement slotchange est déclenché sur une instance de HTMLSlotElement (élément HTML <slot>) lorsque le ou les nœuds contenus dans cet emplacement changent.

Note : L'évènement slotchange n'est pas déclenché si les enfants d'un nœud assigné changent — seulement si vous modifiez (par exemple, ajoutez ou supprimez) les nœuds eux-mêmes.

Pour déclencher un évènement slotchange, il faut définir ou supprimer l'attribut slot.

Cet évènement n'est pas annulable.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènement.

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

onslotchange = (event) => { }

Exemples

element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null

L'extrait suivant est tiré de notre exemple de slotchange ^(angl.) (voir aussi en direct ^(angl.)).

let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `L'élément dans l'emplacement "${slots[1].name}" a changé pour "${nodes[0].outerHTML}".`,
  );
});

Ici, nous récupérons les références de tous les emplacements <slot>, puis nous ajoutons un gestionnaire d'évènement slotchange au deuxième emplacement du modèle — c'est celui dont le contenu change dans l'exemple.

Chaque fois que l'élément inséré dans l'emplacement change, nous enregistrons un rapport dans la console indiquant quel emplacement a changé et quel est le nouveau nœud à l'intérieur de l'emplacement.