Qu'est-ce que le Shadow DOM?

Shadow DOM est une norme web qui permet d'encapsuler le HTML, le CSS et le JavaScript dans des blocs séparés et isolés du document principal.

Concepts principaux:

• Shadow Host: Élément DOM auquel le Shadow DOM est attaché.
• Shadow Tree: Arbre DOM isolé.
• Shadow Boundary: Frontière entre le Shadow DOM et le document principal.
• Shadow Root: Noeud racine du Shadow Tree. Créé avec element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root accessible depuis l'extérieur via element.shadowRoot.
  • closed: Shadow Root non accessible depuis l'extérieur.

Avantages:

• Encapsulation des styles: Les styles définis dans le Shadow DOM ne fuient pas vers l'extérieur et n'affectent pas le document principal. Les styles du document principal par défaut n'affectent pas le Shadow DOM, mais cela peut être contrôlé.
• Encapsulation du DOM: Les éléments à l'intérieur du Shadow DOM ne sont pas visibles dans l'arbre DOM principal, ce qui empêche les interférences accidentelles de sélecteurs et de manipulations.
• Encapsulation du comportement: La logique et les gestionnaires d'événements peuvent être isolés dans le Shadow DOM.

Exemple de création de Shadow DOM:

// Créer un nouvel élément DIV
const hostElement = document.createElement('div');
// Attacher le Shadow DOM à l'élément
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Ajouter du contenu dans le Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Style applicable uniquement à l'intérieur de ce Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Ceci est un texte à l'intérieur du Shadow DOM</p>
`;

// Ajouter l'élément hôte au document principal
document.body.appendChild(hostElement);

Applications:

• Création de composants web réutilisables.
• Isolation des styles de bibliothèques tierces.
• Protection des détails internes du composant contre les interventions extérieures.

Caractéristiques lors de la gestion des styles:

• Les styles externes n'affectent pas par défaut le Shadow DOM.
• On peut utiliser :host pour styliser l'hôte Shadow depuis l'intérieur du Shadow DOM.
• On peut utiliser :host-context() pour styliser en fonction du contexte de l'hôte Shadow.
• On peut utiliser ::slotted() pour styliser les éléments placés dans les slots (<slot>).

<my-component>
  <!-- Cet élément sera "envoyé" dans le slot à l'intérieur du Shadow DOM -->
  <span>Contenu du slot</span>
</my-component>

// À l'intérieur du Shadow DOM du composant my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Style pour l'élément placé dans le slot nommé "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Contenu principal du composant</div>
  <slot></slot> <!-- Le contenu du slot sera affiché ici -->
`;

Shadow DOM fait partie de la spécification Web Components.