Éléments `slot` pour distribuer le contenu
Projetez le contenu de l’hôte dans le DOM d’ombre avec des `slot` nommés et par défaut.
Éléments `slot` pour distribuer le contenu est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
DOM léger ou DOM fantôme
Les enfants écrits à l'intérieur d'un élément personnalisé en HTML forment le « DOM léger » de l'élément : ils ne se trouvent pas dans l'arbre fantôme. Par défaut, le navigateur ne les affiche pas ; l'arbre fantôme doit les demander explicitement via <slot>.
Le slot par défaut
Un élément <slot> dans l'arbre fantôme indique l'emplacement où les enfants du DOM léger doivent apparaître. Sans nom, il s'agit du slot par défaut, qui accepte tout enfant direct de l'hôte.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Slots nommés
Plusieurs slots peuvent être ciblés par leur nom. L'arbre fantôme déclare <slot name="header"> ; l'utilisateur l'active avec <h1 slot="header">. Les enfants dont l'attribut slot correspond remplissent ce slot ; les enfants sans correspondance vont dans le slot par défaut.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Contenu de secours des slots
Le contenu placé entre les balises slot ne s'affiche que lorsque rien n'est affecté à ce slot : <slot>No content provided</slot>. Utilisez-le pour afficher un texte indicatif ou des instructions lorsque les slots sont vides.
Héritage des styles à travers les slots
Les enfants insérés dans un slot restent dans le DOM léger et héritent des styles du document principal, et non de l'arbre fantôme. Depuis l'intérieur de l'arbre fantôme, utilisez le pseudo-élément ::slotted() pour les styliser : ::slotted(p) { color: red; }.
Limitations de ::slotted
::slotted() ne peut cibler que les enfants directs de l'hôte, c'est-à-dire les éléments effectivement distribués dans le slot. Il ne peut pas cibler leurs descendants. Pour appliquer des styles plus en profondeur, exposez des propriétés personnalisées CSS ou utilisez ::part sur les éléments internes du DOM fantôme.
Détecter les modifications des slots
Chaque slot déclenche un événement slotchange lorsque les nodes qui lui sont affectés changent. Écoutez-le pour réagir aux mises à jour dynamiques du contenu : slot.addEventListener("slotchange", handler). C'est utile pour les composants dont la mise en page dépend des enfants présents.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes et assignedElements
slot.assignedNodes() renvoie tous les nodes affectés à un slot, y compris les nodes de texte. slot.assignedElements() renvoie uniquement les éléments enfants — c'est généralement ce qu'il vous faut pour parcourir programmatiquement le contenu inséré dans un slot.
Distribuer les enfants
Le navigateur gère automatiquement toute la distribution en fonction de l'attribut slot de chaque enfant. Aucune étape JavaScript n'est nécessaire : écrivez <span slot="footer">...</span> parmi les enfants du DOM léger de l'hôte et le slot fantôme correspondant le contiendra.
Slots et style de l'hôte
Les propres styles de l'hôte, définis sur <my-card> dans le document, se transmettent en cascade aux enfants du DOM léger, y compris à ceux qui finissent dans un slot. Le CSS fantôme via ::slotted a une spécificité supérieure aux styles hérités de l'hôte lorsque les deux ciblent la même propriété.
Cas d'utilisation courants
Cartes avec des slots pour l'en-tête, le corps et le pied de page, boîtes de dialogue avec des slots pour le titre, le contenu et les actions, éléments de liste avec des slots de début et de fin, menus de navigation avec des slots pour les éléments. Les slots rendent les éléments personnalisés composables, de la même manière que <details>/<summary> ou <table>/<tr> le sont.
Vérification des connaissances
Quelle est la différence entre le slot par défaut et un slot nommé ?
Résumé
Les slots projettent les enfants du DOM léger à des emplacements précis de l'arbre fantôme. Le slot par défaut accepte tout enfant sans nom ; les slots nommés acceptent les enfants dont l'attribut slot correspond. Le contenu de secours remplit les slots vides, ::slotted applique un style aux enfants directs insérés dans un slot, et les événements slotchange permettent de réagir aux mises à jour dynamiques du contenu.
Questions Fréquemment Posées
La leçon « Éléments `slot` pour distribuer le contenu » est-elle gratuite ?
Oui — le texte complet de « Éléments `slot` pour distribuer le contenu » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Éléments `slot` pour distribuer le contenu » ?
Projetez le contenu de l’hôte dans le DOM d’ombre avec des `slot` nommés et par défaut. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Éléments `slot` pour distribuer le contenu » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- `attachShadow` et racine d’ombre
- Éléments `slot` pour distribuer le contenu
- Styles limités dans le DOM d’ombre
- `part` et `exportparts` pour le style externe