Élément HTML `<slot>` : l'élément d'emplacement de composant web

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.

En savoir plus
Voir la compatibilité complète

L'élément HTML <slot> est un emplacement à l'intérieur d'un Composant Web que vous pouvez remplir avec votre propre balisage lorsque le composant est utilisé. Cela vous permet de créer des arbres DOM distincts et de les présenter ensemble.

Les emplacements peuvent contenir du texte brut, d'autres éléments HTML ou d'autres composants web. Un emplacement peut également contenir du contenu par défaut, qui est affiché si l'emplacement n'est pas assigné à un autre contenu lorsque le composant web est utilisé.

Attributs

Cet élément inclut les attributs universels.

name Un emplacement nommé est un élément <slot> avec un attribut name, tandis qu'un emplacement non nommé n'a pas d'attribut name, et le nom par défaut est une chaîne de caractères vide.

Lorsque la racine d'ombre utilise l'affectation d'emplacements nommés, les éléments enfants de premier niveau de son hôte sont rendus dans les emplacements qui ont un nom correspondant dans leur attribut slot. Les noms d'emplacements doivent être uniques par racine d'ombre : si vous avez deux emplacements avec le même nom, tous les éléments ayant un attribut slot correspondant sont rendus dans le premier emplacement. Tous les éléments enfants de premier niveau qui n'ont pas d'attribut slot sont rendus dans le premier élément <slot> non nommé, appelé emplacement par défaut. Le name n'a aucun effet si la racine d'ombre utilise l'affectation d'emplacements manuelle.

Pour plus d'informations, consultez shadowrootslotassignment sur l'élément <template> et Element.attachShadow().

Exemples

Utilisation simple

Ce HTML montre comment un certain nombre d'emplacements nommés peuvent être déclarés à l'intérieur d'un élément <template>. Notez que ces emplacements ne sont utilisés comme emplacements que lorsque le modèle est utilisé à l'intérieur d'une racine d'ombre.

html

<template id="element-details-template">
  <style>
    details {
      font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
    }
    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%;
    }
    h4 {
      margin: 10px 0 -8px 0;
      background: #217ac0;
      color: white;
      padding: 2px 6px;
      border: 1px solid #cee9f9;
      border-radius: 4px;
    }
    .attributes {
      margin-left: 22px;
      font-size: 90%;
    }
    .attributes p {
      margin-left: 16px;
      font-style: italic;
    }
  </style>
  <details>
    <summary>
      <code class="name"
        >&lt;<slot name="element-name">Remplacer ce nom</slot>&gt;</code
      >
      <i class="desc"
        ><slot name="description">Remplacer cette description</slot></i
      >
    </summary>
    <div class="attributes">
      <h4>Attributs</h4>
      <slot name="attributes"><p>Aucun</p></slot>
    </div>
  </details>
  <hr />
</template>

Note : Vous pouvez retrouver cet exemple sur ce dépôt GitHub ^(angl.) et observer son fonctionnement en live ici ^(angl.). Une explication plus détaillée est également disponible avec l'article Manipuler template et slot.

Résumé technique

Catégories de contenu	Contenu de flux, contenu phrasé.
Contenu autorisé	Contenu transparent
Évènements	`slotchange`
Omission de balises	Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés	Tout élément qui accepte du contenu phrasé.
Rôle ARIA implicite	Pas de rôle correspondant ^(angl.)
Rôles ARIA autorisés	Aucun `role` autorisé
Interface DOM	`HTMLSlotElement`