Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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).

Catégories de contenu Contenu de flux, contenu phrasé.
Contenu autorisé Contenu transparent.
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

Attributs

Cet élément inclut les attributs universels.

name
Le nom de l'emplacement créé.
A named slot is a <slot> element with a name attribute.

Exemples

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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<slot>' dans cette spécification.
Standard évolutif  
DOM
La définition de 'Slots' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple53 Non

591

Oui — 592

Non4010
name53 Non Non Non4010
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple5353 Non

591

Oui — 592

4010.16.0
name5353 Non Non4010.16.0

1. From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,