Ce este Shadow DOM?

Shadow DOM este un standard web care permite încapsularea DOM și CSS în interiorul unui component. Creează un arbore DOM separat și izolat, numit "arbore de umbră" (shadow tree), care este atașat unui element din documentul principal, numit "rădăcină de umbră" (shadow root).

Avantajele Shadow DOM:

• Izolare CSS: Stilurile definite în interiorul Shadow DOM nu "scapă" în exterior, influențând documentul principal, și, implicit, stilurile din documentul principal nu afectează Shadow DOM.
• Izolare DOM: Structura Shadow DOM este ascunsă de documentul principal și nu este accesibilă prin metode standard de selecție (de exemplu, querySelector).
• Izolare JavaScript: Scripturile care rulează în documentul principal nu pot accesa ușor elementele din interiorul Shadow DOM.
• Reutilizare: Componentele create cu Shadow DOM pot fi ușor utilizate în alte părți ale aplicației sau chiar pe alte site-uri web.

Crearea Shadow DOM:

// Obținem elementul la care dorim să atașăm Shadow DOM
const hostElement = document.getElementById('my-component');

// Creăm Shadow Root
// 'open' face ca Shadow DOM să fie accesibil din exterior prin hostElement.shadowRoot
// 'closed' ascunde Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Adăugăm elemente în interiorul Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stiluri specifice pentru acest component */
    h2 {
      color: blue;
    }
  </style>
  <h2>Titlu în interiorul componentului</h2>
  <p>Paragraf în interiorul componentului.</p>
`;

Caracteristici:

• Sloturi: Permite inserarea de conținut extern în anumite locuri din interiorul Shadow DOM.
• Părți de umbră (Shadow Parts): Permite stilizarea anumitor elemente din interiorul Shadow DOM din exterior.

Shadow DOM este o componentă cheie pentru crearea de web components (Web Components), oferind o încapsulare puternică, necesară pentru crearea de elemente UI reutilizabile și autonome.