JavaScript Academy · Leçon

Gabarits et emplacements

Composez des composants avec template et slot.

Gabarits et emplacements est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

L’élément modèle

L’élément <template> contient du HTML inerte qui est analysé, mais pas affiché. Son contenu reste en dehors de la page jusqu’à ce que vous le cloniez et l’insériez, ce qui le rend idéal pour le balisage réutilisable.

Accéder au contenu d’un modèle

Les enfants d’un modèle se trouvent dans sa propriété .content, qui est un DocumentFragment. Les scripts, les images et les styles qu’il contient ne sont ni exécutés ni chargés avant son insertion.

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

Cloner un modèle

Utilisez importNode ou cloneNode(true) pour copier le contenu du modèle, puis insérez le clone. Le clonage permet de créer de nombreuses copies à moindre coût.

const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

Modèles au sein des composants

Les éléments personnalisés définissent souvent un modèle une seule fois, puis le clonent dans leur racine fantôme pour chaque instance. Cette méthode est plus rapide que d’analyser à nouveau une chaîne HTML à chaque fois.

const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';

class MyCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.appendChild(tpl.content.cloneNode(true));
  }
}
customElements.define('my-card', MyCard);

Qu’est-ce qu’un slot ?

Un <slot> est un emplacement réservé dans un arbre fantôme, où le contenu enfant propre à l’élément (son DOM léger) est projeté. Cela permet aux utilisateurs d’insérer du contenu personnalisé dans votre composant.

// Shadow root markup:
// <div class="box"><slot></slot></div>

// Usage:
// <my-card>This text fills the slot</my-card>

Contenu par défaut d’un slot

Le contenu placé entre les balises <slot> sert de solution de repli. Il s’affiche uniquement lorsque l’utilisateur ne fournit aucun contenu correspondant.

// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.

Slots nommés

Plusieurs slots peuvent coexister grâce à l’attribut name. Les enfants du DOM léger ciblent un slot à l’aide de l’attribut slot.

// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>

// Usage:
// <my-card>
//   <h2 slot="title">Hello</h2>
//   <p slot="body">World</p>
// </my-card>

Le slot par défaut (sans nom)

Un slot sans attribut name est le slot par défaut. Tout enfant sans attribut slot y est projeté. Vous pouvez associer un slot par défaut à plusieurs slots nommés.

// <slot name="header"></slot>
// <slot></slot>  <!-- default: catches everything else -->

Styliser le contenu projeté

Utilisez le pseudo-élément ::slotted() pour styliser les enfants projetés depuis les styles fantômes. Il ne cible que les nœuds projetés de premier niveau.

// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }

L’événement slotchange

Un slot déclenche un événement slotchange lorsque ses nœuds assignés changent. Écoutez-le pour réagir lorsque les utilisateurs ajoutent ou suppriment du contenu projeté.

const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
  const nodes = slot.assignedNodes();
  console.log('slot now has', nodes.length, 'nodes');
});

Modèles et slots associés

Les modèles définissent la structure une seule fois ; les slots la rendent flexible en permettant aux utilisateurs d’y injecter leur propre contenu. Ensemble, ils constituent la base de composants Web propres, réutilisables et personnalisables.

Vérification rapide

Vérifiez votre compréhension des modèles et des slots.

Récapitulatif

Vous avez découvert les modèles et les slots :

<template> contient du balisage inerte et réutilisable dans .content.
Clonez-le avec cloneNode(true) avant de l’insérer.
<slot> projette le DOM léger dans l’arbre fantôme.
Les slots nommés utilisent name ainsi que l’attribut slot de l’enfant.
::slotted() applique un style aux nœuds projetés ; slotchange réagit aux mises à jour.

Vous avez terminé la partie sur les composants Web. Ensuite, nous découvrirons l’API d’observation des intersections.

Questions Fréquemment Posées

La leçon « Gabarits et emplacements » est-elle gratuite ?

Oui — le texte complet de « Gabarits et emplacements » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Gabarits et emplacements » ?

Composez des composants avec template et slot. Tu pratiques JavaScript 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 JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript 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 4 sur 4.

Combien de temps prend la leçon « Gabarits et emplacements » ?

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 JavaScript Academy ?

Oui. Chaque leçon JavaScript 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

← Retour à JavaScript Academy