JavaScript Academy · Leçon

DOM fantôme et encapsulation

Isolez les styles et le balisage dans des racines fantômes.

DOM fantôme et encapsulation est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Qu’est-ce que le DOM fantôme ?

Le DOM fantôme fournit à un élément un arbre DOM privé et encapsulé. Le balisage et les styles qu’il contient sont isolés du reste de la page.

Le CSS extérieur n’y pénètre pas.
Le CSS intérieur ne s’en échappe pas.
La structure interne est masquée des requêtes DOM normales.

attachShadow

Vous créez un arbre fantôme en appelant this.attachShadow({ mode: 'open' }). Cette méthode renvoie une racine fantôme que vous pouvez remplir comme un nœud normal.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

Mode ouvert ou fermé

L’option mode contrôle l’accès depuis l’extérieur :

'open' — la racine est accessible via element.shadowRoot.
'closed' — element.shadowRoot renvoie null ; seul votre code conserve la référence.

La plupart des composants utilisent 'open' pour faciliter le débogage.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Remplir la racine fantôme

Définissez shadowRoot.innerHTML pour créer le contenu encapsulé. Ce balisage est invisible pour document.querySelector.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Styles isolés

Une balise style à l’intérieur de la racine fantôme n’affecte que cette racine. Le même sélecteur situé à l’extérieur du composant reste sans effet, et les styles de la page n’y pénètrent pas.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

Le sélecteur :host

Dans les styles fantômes, :host cible l’élément personnalisé lui-même (l’hôte de l’arbre fantôme). Utilisez-le pour styliser la boîte extérieure du composant.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

L’isolation des styles en pratique

L’encapsulation signifie que les auteurs des composants et ceux des pages cessent de se disputer les noms de classes. Une règle .title à l’intérieur d’un composant n’affecte jamais un autre .title ailleurs.

Aucun conflit CSS global.
Les sélecteurs simples et génériques redeviennent sûrs.

Interroger la racine fantôme

Pour accéder aux nœuds internes, interrogez la racine fantôme, et non le document. La racine fantôme prend en charge les mêmes méthodes de requête.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Les événements franchissent la frontière

De nombreux événements (comme click) remontent hors du DOM fantôme, mais leur cible est réattribuée : les écouteurs extérieurs voient l’élément hôte, et non le nœud interne. Cela préserve l’encapsulation.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Styles héritables

Quelques propriétés CSS (comme color et font-family) traversent la frontière fantôme par héritage, car celui-ci descend le long de l’arbre composé. Vous pouvez adopter l’apparence de la page en vous appuyant sur l’héritage ou en utilisant des propriétés CSS personnalisées.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Quand utiliser le DOM fantôme

Utilisez le DOM fantôme lorsque vous avez besoin d’une isolation forte des styles et du balisage pour un composant réutilisable. Évitez-le lorsque vous souhaitez que le composant hérite librement des styles globaux de la page et y participe.

Vérification rapide

Vérifiez votre compréhension du DOM fantôme.

Récapitulatif

Vous avez découvert le DOM fantôme :

attachShadow({ mode }) crée un arbre isolé.
'open' expose shadowRoot ; 'closed' le masque.
Les balises style internes sont limitées à l’arbre ; :host applique un style à l’élément lui-même.
Les requêtes s’exécutent sur la racine fantôme, et non sur le document.
Les événements voient leur cible réattribuée afin de préserver l’encapsulation.

Ensuite, nous réutiliserons le balisage avec les modèles et les emplacements.

Questions Fréquemment Posées

La leçon « DOM fantôme et encapsulation » est-elle gratuite ?

Oui — le texte complet de « DOM fantôme et encapsulation » 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 « DOM fantôme et encapsulation » ?

Isolez les styles et le balisage dans des racines fantômes. 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 3 sur 4.

Combien de temps prend la leçon « DOM fantôme et encapsulation » ?

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