Mi az a Shadow DOM?

Shadow DOM — ez egy webes szabvány, amely lehetővé teszi a DOM-fa és a stílusok inkapszulálását egy komponensen belül, izolálva azokat a dokumentum többi részétől.

Fő fogalmak:

• Shadow tree: Saját DOM-fa, amely egy elemhez csatlakozik.
• Shadow boundary: Határ, amely elválasztja a Shadow DOM-ot a fő dokumentumtól.
• Shadow host: Az elem, amelyhez a Shadow DOM csatlakozik.
• Shadow root: A Shadow tree gyökércsomópontja.

Előnyök:

• Stílus izoláció: A Shadow DOM-ban definiált stílusok nem befolyásolják a rajta kívüli elemeket, és fordítva.
• DOM izoláció: A Shadow DOM-on belüli DOM-struktúra nem látható és nem érhető el közvetlenül a fő dokumentumból, ez megakadályozza az azonosítók és osztályok konfliktusát.
• Encapsuláció: moduláris, újrahasznosítható komponenseket hoz létre.

Shadow DOM létrehozása:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mód: 'open' - JavaScript-ből elérhető; 'closed' - nem

shadowRoot.innerHTML = `
  <style>
    /* Csak ennek a Shadow DOM-nak a stílusai */
    p {
      color: blue;
    }
  </style>
  <p>Ez a Shadow DOM tartalma</p>
`;