<slot>

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'é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 relatifsaux composants web (Web Components).

Attributs

Cet élément inclutles attributs universels.

name

Le nom de l'emplacement créé.

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

Exemples

html

<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        >&lt;<slot name="element-name">Remplacer ce nom</slot>&gt;</code      >      <i        ><slot name="description">Remplacer cette description</slot></i      >    </summary>    <div>      <h4>Attributs</h4>      <slot name="attributes"><p>Aucun</p></slot>    </div>  </details>  <hr /></template>

Note :Vous pouvez retrouver cet exemple surce dépôt GitHub et observerson fonctionnement en live ici. Une explication plus détaillée est également disponible avec l'articleManipulertemplate etslot.

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 ducontenu phrasé.
Rôles ARIA autorisés	Aucun.
Interface DOM	`HTMLSlotElement`