Qu'est-ce que le Shadow DOM?

Shadow DOM — c'est une norme web permettant d'encapsuler l'arbre DOM et les styles à l'intérieur d'un composant, en les isolant du reste du document.

Concepts principaux:

• Shadow tree: Arbre DOM propre, attaché à un élément.
• Shadow boundary: Frontière séparant le Shadow DOM du document principal.
• Shadow host: Élément auquel le Shadow DOM est attaché.
• Shadow root: Noeud racine du Shadow tree.

Avantages:

• Isolation des styles: Les styles définis à l'intérieur du Shadow DOM n'affectent pas les éléments en dehors, et vice versa.
• Isolation du DOM: La structure DOM à l'intérieur du Shadow DOM n'est pas visible ni accessible directement depuis le document principal, ce qui évite les conflits d'id et de classes.
• Encapsulation: Crée des composants modulaires et réutilisables.

Création du Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mode: 'open' - accessible via JavaScript; 'closed' - non

shadowRoot.innerHTML = `
  <style>
    /* Styles uniquement pour ce Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Ceci est le contenu du Shadow DOM</p>
`;