Element : propriété assignedSlot
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é en lecture seule assignedSlot de l'interface Element retourne un objet HTMLSlotElement représentant l'élément HTML <slot> dans lequel le nœud est inséré.
Valeur
Une instance de HTMLSlotElement, ou null si l'élément n'est pas assigné à un slot, ou si la racine d'ombre associée a été attachée avec son mode défini sur closed (voir Element.attachShadow pour plus de détails).
Exemples
Dans notre exemple simple de modèle (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 à l'aide du contenu d'un modèle contenant un slot nommé mon-texte.
Lorsque <mon-paragraphe> est utilisé dans le document, le slot est rempli par un élément assignable en l'incluant à l'intérieur de l'élément avec un attribut slot ayant pour valeur mon-texte. Voici un exemple :
<mon-paragraphe>
<span slot="mon-texte">Changeons un peu le texte !</span>
</mon-paragraphe>
Dans notre fichier JavaScript, nous obtenons une référence au <span> montré ci-dessus, puis enregistrons une référence à l'élément <slot> original dans lequel le <span> a été inséré.
let slottedSpan = document.querySelector("mon-paragraphe span");
console.log(slottedSpan.assignedSlot); // journal '<slot name="mon-texte">'
Spécifications
| Spécification |
|---|
| DOM # dom-slotable-assignedslot |