Mi az a Shadow DOM?

Shadow DOM egy web szabvány, amely lehetővé teszi a HTML, CSS és JavaScript inkapszulálását különálló, elszigetelt blokkokba a fő dokumentumtól.

Fő fogalmak:

• Shadow Host: DOM elem, amelyhez a Shadow DOM csatlakozik.
• Shadow Tree: Elkülönített DOM fa.
• Shadow Boundary: Határ a Shadow DOM és a fő dokumentum között.
• Shadow Root: A Shadow Tree gyökér csomópontja. A element.attachShadow({ mode: 'open' | 'closed' }) segítségével hozható létre:
  • open: A Shadow Root külső eléréséhez az element.shadowRoot használható.
  • closed: A Shadow Root nem elérhető külsőleg.

Előnyök:

• Stílus inkapszuláció: A Shadow DOM-ban definiált stílusok nem szivárognak ki és nem befolyásolják a fő dokumentumot. A fő dokumentum stílusai alapértelmezés szerint nem hatnak a Shadow DOM-ra, de ez szabályozható.
• DOM inkapszuláció: A Shadow DOM-ban lévő elemek nem láthatók a fő DOM fában, ez megakadályozza véletlen átfedéseket a szelektorokban és manipulációkban.
• Viselkedés inkapszuláció: A logika és az eseménykezelők izolálhatók a Shadow DOM-ban.

Shadow DOM létrehozásának példája:

// Új DIV elem létrehozása
const hostElement = document.createElement('div');
// Shadow DOM hozzáadása az elemhez
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Tartalom hozzáadása a Shadow DOM-hoz
shadowRoot.innerHTML = `
  <style>
    /* Csak ebben a Shadow DOM-ban alkalmazható stílus */
    p {
      color: blue;
    }
  </style>
  <p>Ez egy szöveg a Shadow DOM-ban</p>
`;

// A gazdaelemet hozzáadjuk a fő dokumentumhoz
document.body.appendChild(hostElement);

Alkalmazások:

• Újrahasznosítható webkomponensek létrehozása.
• Külső könyvtárak stílusainak izolálása.
• A komponens belső részleteinek védelme külső beavatkozások ellen.

Stílusokkal való munka jellemzői:

• A külső stílusok alapértelmezés szerint nem befolyásolják a Shadow DOM-ot.
• A :host pszeudo-osztály használható a Shadow Host stílusozására a Shadow DOM-ból.
• A :host-context() segítségével a Shadow Host kontextusától függően lehet stílusokat alkalmazni.
• A ::slotted() pszeudo-elem segítségével lehet stílusokat alkalmazni a slotokba (<slot>) helyezett elemekre.

<my-component>
  <!-- Ez az elem a Shadow DOM belsejében lévő slotba lesz "küldve" -->
  <span>Slot tartalom</span>
</my-component>

// A my-component Shadow DOM-jában
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Stílus a "my-slot" nevű slotba helyezett elemhez */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>A komponens fő tartalma</div>
  <slot></slot> <!-- Itt jelenik meg a slot tartalma -->
`;

A Shadow DOM a Web Components specifikáció része.