Element : propriété slot
Baseline
Large disponibilité
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.
La propriété slot de l'interface Element retourne le nom de l'emplacement du DOM d'ombre dans lequel l'élément est inséré.
Un emplacement est un espace réservé à l'intérieur d'un composant web que les utilisateur·ice·s peuvent remplir avec leur propre balisage (voir Utiliser les modèles et les emplacements pour plus d'informations).
Valeur
Une chaîne de caractères.
Exemples
Dans notre exemple simple-template (angl.) (voir en direct (angl.)), nous créons un exemple trivial d'élément personnalisé appelé <mon-paragraphe> dans lequel une racine d'ombre est attachée puis remplie avec le contenu d'un modèle qui contient un emplacement nommé mon-texte.
Lorsque <mon-paragraphe> est utilisé dans le document, l'emplacement est rempli par un élément pouvant être placé dans un emplacement en l'incluant à l'intérieur de l'élément avec un attribut slot ayant pour valeur mon-texte. Voici un tel exemple :
<mon-paragraphe>
<span slot="mon-texte">C'est un texte différent !</span>
</mon-paragraphe>
Dans notre fichier JavaScript, nous obtenons une référence à l'élément HTML <span> montré ci-dessus, puis enregistrons une référence au nom de l'élément <slot> correspondant.
let spanDansEmplacement = document.querySelector("mon-paragraphe span");
console.log(spanDansEmplacement.slot); // affiche 'mon-texte'
Spécifications
| Spécification |
|---|
| DOM # ref-for-dom-element-slot① |