Qu'est-ce que le Shadow DOM?

Shadow DOM est une norme web permettant d'encapsuler le DOM et le CSS à l'intérieur d'un composant. Il crée un arbre DOM séparé et isolé, appelé "arbre d'ombre" (shadow tree), qui est attaché à un élément dans le document principal, appelé "racine d'ombre" (shadow root).

Avantages du Shadow DOM:

• Isolation du CSS: Les styles définis à l'intérieur du Shadow DOM ne "fuient" pas vers l'extérieur, affectant le document principal, et par défaut, les styles du document principal n'affectent pas le Shadow DOM.
• Isolation du DOM: La structure du Shadow DOM est cachée du document principal et n'est pas accessible via des méthodes de sélection standard (par exemple, querySelector).
• Isolation de JavaScript: Les scripts s'exécutant dans le document principal ne peuvent pas facilement accéder aux éléments à l'intérieur du Shadow DOM.
• Réutilisation: Les composants créés avec Shadow DOM peuvent être facilement utilisés dans d'autres parties de l'application ou même sur d'autres sites web.

Création du Shadow DOM:

// Obtenez l'élément auquel vous souhaitez attacher le Shadow DOM
const hostElement = document.getElementById('my-component');

// Créez Shadow Root
// 'open' rend le Shadow DOM accessible de l'extérieur via hostElement.shadowRoot
// 'closed' cache le Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Ajoutez des éléments à l'intérieur du Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Styles spécifiques à ce composant */
    h2 {
      color: blue;
    }
  </style>
  <h2>En-tête à l'intérieur du composant</h2>
  <p>Paragraphe à l'intérieur du composant.</p>
`;

Caractéristiques:

• Slots: Permettent d'insérer du contenu externe à des endroits spécifiques à l'intérieur du Shadow DOM.
• Parties d'ombre (Shadow Parts): Permettent de styliser certains éléments à l'intérieur du Shadow DOM depuis l'extérieur.

Le Shadow DOM est une composante clé pour créer des composants web (Web Components), offrant une encapsulation forte nécessaire à la création d'éléments UI réutilisables et autonomes.