Mi az a Shadow DOM?

Shadow DOM egy web szabvány, amely lehetővé teszi a DOM és a CSS inkapszulációját egy komponensen belül. Egy külön, elszigetelt DOM fát hoz létre, amit "árnyékfa" (shadow tree) néven ismerünk, és amely egy elemhez csatlakozik a fő dokumentumban, amit "árnyék gyökér" (shadow root) néven nevezünk.

A Shadow DOM előnyei:

• CSS izoláció: A Shadow DOM belsejében meghatározott stílusok nem "szivárognak" ki, nem befolyásolják a fő dokumentumot, és alapértelmezés szerint a fő dokumentum stílusai nem befolyásolják a Shadow DOM-ot.
• DOM izoláció: A Shadow DOM szerkezete el van rejtve a fő dokumentumtól, és nem érhető el standard kiválasztási módszerekkel (pl. querySelector).
• JavaScript izoláció: A fő dokumentumban futó szkriptek nem férnek könnyen hozzá a Shadow DOM belső elemeihez.
• Újrahasznosítás: A Shadow DOM-mal létrehozott komponensek könnyen használhatók más részein az alkalmazásnak vagy akár más weboldalakon.

Shadow DOM létrehozása:

// Az elem, amelyhez a Shadow DOM-ot hozzá szeretnénk adni
const hostElement = document.getElementById('my-component');

// Shadow Root létrehozása
// Az 'open' lehetővé teszi, hogy a Shadow DOM külsőleg elérhető legyen a hostElement.shadowRoot segítségével
// A 'closed' elrejti a Shadow DOM-ot
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Elemek hozzáadása a Shadow DOM-hoz
shadowRoot.innerHTML = `
  <style>
    /* Ezen komponens specifikus stílusok */
    h2 {
      color: blue;
    }
  </style>
  <h2>Fejléc a komponensen belül</h2>
  <p>Bekezdés a komponensen belül.</p>
`;

Jellemzők:

• Slotok: Lehetővé teszik külső tartalom beszúrását a Shadow DOM egyes részeibe.
• Shadow Parts: Lehetővé teszik bizonyos elemek stílusozását a Shadow DOM-on kívülről.

A Shadow DOM kulcsfontosságú összetevője a webkomponensek (Web Components) létrehozásának, erős inkapszulációt biztosítva, amely szükséges az újrahasznosítható és önálló UI-elemek létrehozásához.