HTMLSlotElement

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'interfaceHTMLSlotElement 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>.

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'optionflatten 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'optionflatten 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 deaddEventListener() ou en assignant un gestionnaire d'évènements à la propriétéoneventname de cette interface.

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

Exemples

L'extrait suivant est tiré de notreexemple 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, 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.