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

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émentHTML<slot> — qui fait partie de la suite technologiquedes Composants Web — est un emplacement à l'intérieur d'un composant web que vous pouvez remplir avec votre propre balisage, ce qui permet de créer des arbres DOM distincts et de les présenter ensemble.

Attributs

Cet élément inclut lesattributs universels.

name: Le nom de l'emplacement (slot en anglais). Lorsque le composant contenant l'emplacement est affiché, l'emplacement est rendu avec l'enfant de l'élément personnalisé qui possède un attributslot correspondant. Unemplacement nommé est un élément<slot> avec un attributname. Les emplacements sans nom ont pour valeur par défaut une chaîne vide. Les noms doivent être uniques par arbre d'ombre : si vous avez deux emplacements avec le même nom, tous les éléments ayant un attributslot correspondant seront assignés au premier emplacement portant ce nom.

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^(angl.) et observerson fonctionnement en live ici^(angl.). 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ôle ARIA implicite	Pas de rôle correspondant^(angl.)
Rôles ARIA autorisés	Aucun`role` autorisé
Interface DOM	`HTMLSlotElement`