HTMLSlotElement

Baseline Large disponibilité

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'interface HTMLSlotElement de l'API du DOM d'ombre permet d'accéder au nom et aux nœuds assignés d'un élément HTML <slot>.

EventTarget Node Element HTMLElement HTMLSlotElement

Dans cet article

Propriétés d'instance

Hérite également des propriétés de son interface parente, HTMLElement.

HTMLSlotElement.name

Une chaîne de caractères utilisée pour obtenir et définir le nom de l'emplacement.

Méthodes d'instance

Hérite également des méthodes de son interface parente, HTMLElement.

HTMLSlotElement.assign()

Définit les nœuds assignés manuellement à cet emplacement sur les nœuds donnés.

HTMLSlotElement.assignedNodes()

Retourne une séquence des nœuds assignés à cet emplacement. Si l'option flatten est définie à true, elle retourne une séquence des nœuds assignés à cet emplacement ainsi qu'à tous les autres emplacements descendants de celui-ci. Si aucun nœud assigné n'est trouvé, elle retourne le contenu de secours de l'emplacement.

HTMLSlotElement.assignedElements()

Retourne une séquence des éléments assignés à cet emplacement (et aucun autre nœud). Si l'option flatten est définie à true, elle retourne une séquence des éléments assignés à cet emplacement ainsi qu'à tous les autres emplacements descendants de celui-ci. Si aucun élément assigné n'est trouvé, elle retourne le contenu de secours de l'emplacement.

Évènements

Hérite également des évènements de son interface parente, HTMLElement.

Écoutez ces évènements à l'aide de addEventListener() ou en assignant un gestionnaire d'évènements à la propriété oneventname de cette interface.

slotchange

Déclenché sur une instance de HTMLSlotElement (élément <slot>) lorsque le ou les nœuds contenus dans cet emplacement changent.

Exemples

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

js
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, 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 nouvel élément à l'intérieur de l'emplacement.

Spécifications

Spécification

HTML
# htmlslotelement

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 16 janv. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Web Components (composants web)
HTMLSlotElement
Propriétés d'instance
1. name
Méthodes d'instance
Évènements
1. slotchange
Héritage
Pages liées à Web Components
Guides
1. Utilisation d'éléments personnalisés
2. Utiliser le DOM d'ombre
3. Utiliser les éléments template et slot