Čo je Shadow DOM?

Shadow DOM je web štandard koji omogoča inkapsulacijo DOM in CSS znotraj komponente. Ustvarja ločeno, izolirano drevo DOM, imenovano "senčno drevo" (shadow tree), ki je pripeto elementu v glavnem dokumentu, imenovanem "senčni koren" (shadow root).

Prednosti Shadow DOM:

• Izolacija CSS: Stili, določeni znotraj Shadow DOM, ne "uhajajo" ven, ne vplivajo na glavni dokument, in po privzetku, stili iz glavnega dokumenta ne vplivajo na Shadow DOM.
• Izolacija DOM: Struktura Shadow DOM je skrita od glavnega dokumenta in ni dostopna preko standardnih metod izbora (npr., querySelector).
• Izolacija JavaScript: Skripti, ki se izvajajo v glavnem dokumentu, ne morejo enostavno dostopati do elementov znotraj Shadow DOM.
• Ponovna uporaba: Komponente, ustvarjene z Shadow DOM, je mogoče enostavno uporabiti v drugih delih aplikacije ali celo na drugih spletnih straneh.

Ustvarjanje Shadow DOM:

// Dobimo element, na katerega želimo pripeti Shadow DOM
const hostElement = document.getElementById('my-component');

// Ustvarimo Shadow Root
// 'open' omogoča dostop do Shadow DOM od zunaj preko hostElement.shadowRoot
// 'closed' skriva Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Dodajamo elemente znotraj Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stil, specifičen za ta komponent */
    h2 {
      color: blue;
    }
  </style>
  <h2>Naslov znotraj komponente</h2>
  <p>Paragraf znotraj komponente.</p>
`;

Lastnosti:

• Slotovi: Omogočajo vstavljanje zunanjega vsebine na določena mesta znotraj Shadow DOM.
• Shadow Parts: Omogočajo stilizacijo določenih elementov znotraj Shadow DOM od zunaj.

Shadow DOM je ključni element za ustvarjanje web komponent (Web Components), ki zagotavljajo močno inkapsulacijo, potrebno za ustvarjanje ponovno uporabnih in samostojnih UI elementov.