Ce este Shadow DOM?

Shadow DOM — este un standard web care permite încapsularea arborelui DOM și a stilurilor în interiorul unui component, izolându-le de restul documentului.

Concepte principale:

• Shadow tree: Arbore DOM propriu, atașat unui element.
• Shadow boundary: Granița care separă Shadow DOM de documentul principal.
• Shadow host: Elementul la care este atașat Shadow DOM.
• Shadow root: Nodul rădăcină al Shadow tree.

Avantaje:

• Izolare a stilurilor: Stilurile definite în interiorul Shadow DOM nu afectează elementele din afara sa, și vice-versa.
• Izolare a DOM-ului: Structura DOM din interiorul Shadow DOM nu este vizibilă și nu este accesibilă direct din documentul principal, prevenind conflictele de id-uri și clase.
• Încapsulare: Creează componente modulare și reutilizabile.

Crearea Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mod: 'open' - accesibil prin JavaScript; 'closed' - nu

shadowRoot.innerHTML = `
  <style>
    /* Stiluri doar pentru acest Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Acesta este conținutul Shadow DOM</p>
`;