<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ément HTML <slot> — qui fait partie de la suite technologique des 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 les attributs 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 attribut
slotcorrespondant. Un emplacement 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 attributslotcorrespondant seront assignés au premier emplacement portant ce nom.
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"
><<slot name="element-name">Remplacer ce nom</slot>></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 |
Spécifications
| Specification |
|---|
| HTML # the-slot-element |
| DOM # shadow-tree-slots |
Compatibilité des navigateurs
Voir aussi
- L'élément
<template> - L'attribut HTML
slot - Le pseudo-élément CSS
::slotted - La pseudo-classe CSS
:has-slotted - Le module de portée CSS