Shadow DOM

Definition

Sous-arbre DOM encapsulé attaché à un élément hôte. Le CSS et le JS internes sont isolés du document principal, évitant les conflits de styles et de noms.

Analogie

Comme un appartement dans un immeuble : chaque logement a sa propre décoration sans affecter les voisins.

Exemple de code

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>p { color: blue; }</style>
      <p><slot></slot></p>`;
  }
}

Cas d'usage

Créer des composants UI réutilisables avec encapsulation totale des styles dans un design system.

Anti-pattern

Termes lies