<slot>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

L'élément HTML <slot> représente un emplacement d'un composant web qu'on peut remplir avec son propre balisage. On peut ainsi obtenir un document construit avec différents arbres DOM. Cet élément fait partie des outils relatifs aux composants web (Web Components).

Attributs

Cet élément inclut les attributs universels.

name

Le nom de l'emplacement créé.

Un « slot » nommé est un élément <slot> avec un attribut name.

Exemples

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 et observer son fonctionnement en live ici. 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ôles ARIA autorisés Aucun.
Interface DOM HTMLSlotElement

Spécifications

Specification
HTML
# the-slot-element
DOM
# shadow-tree-slots

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
slot
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi