Šta je Shadow DOM?

Shadow DOM je veb standard koji omogućava inkapsulaciju DOM i CSS unutar komponenti. Kreira odvojeno, izolovano drvo DOM, nazvano "senka stablo" (shadow tree), koje se pridružuje elementu u glavnom dokumentu, nazvano "senka koren" (shadow root).

Prednosti Shadow DOM-a:

• Izolacija CSS: Stilovi definisani unutar Shadow DOM-a ne "curi" napolje, ne utičući na glavni dokument, i po default-u, stilovi iz glavnog dokumenta ne utiču na Shadow DOM.
• Izolacija DOM: Struktura Shadow DOM-a je skrivena od glavnog dokumenta i nije dostupna putem standardnih metoda izbora (npr., querySelector).
• Izolacija JavaScript: Skripte koje se izvršavaju u glavnom dokumentu ne mogu lako pristupiti elementima unutar Shadow DOM-a.
• Ponovna upotreba: Komponente kreirane sa Shadow DOM-om mogu se lako koristiti u drugim delovima aplikacije ili čak na drugim veb stranicama.

Kreiranje Shadow DOM-a:

// Dobijamo element na koji želimo da dodamo Shadow DOM
const hostElement = document.getElementById('my-component');

// Kreiramo Shadow Root
// 'open' omogućava pristup Shadow DOM-u spolja putem hostElement.shadowRoot
// 'closed' skriva Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Dodajemo elemente unutar Shadow DOM-a
shadowRoot.innerHTML = `
  <style>
    /* Stilovi specifični za ovaj komponent */
    h2 {
      color: blue;
    }
  </style>
  <h2>Naslov unutar komponente</h2>
  <p>Paragraf unutar komponente.</p>
`;

Karakteristike:

• Slotovi: Omogućavaju umetanje spoljnog sadržaja na određena mesta unutar Shadow DOM-a.
• Shadow Parts: Omogućavaju stilizovanje određenih elemenata unutar Shadow DOM-a spolja.

Shadow DOM je ključni element za kreiranje web komponenti (Web Components), pružajući snažnu inkapsulaciju, koja je neophodna za kreiranje ponovo upotrebljivih i samostalnih UI elemenata.