Cos'è Shadow DOM?

Shadow DOM è uno standard web che consente di incapsulare DOM e CSS all'interno di un componente. Crea un albero DOM separato e isolato, chiamato "albero ombra" (shadow tree), che viene allegato a un elemento nel documento principale, chiamato "radice ombra" (shadow root).

Vantaggi del Shadow DOM:

• Isolamento CSS: Gli stili definiti all'interno del Shadow DOM non "fuggono" all'esterno, influenzando il documento principale, e per impostazione predefinita, gli stili del documento principale non influenzano il Shadow DOM.
• Isolamento DOM: La struttura del Shadow DOM è nascosta dal documento principale e non è accessibile tramite metodi di selezione standard (ad esempio, querySelector).
• Isolamento JavaScript: Gli script che vengono eseguiti nel documento principale non possono facilmente accedere agli elementi all'interno del Shadow DOM.
• Riutilizzo: I componenti creati con Shadow DOM possono essere facilmente utilizzati in altre parti dell'applicazione o anche su altri siti web.

Creazione del Shadow DOM:

// Otteniamo l'elemento a cui vogliamo allegare il Shadow DOM
const hostElement = document.getElementById('my-component');

// Creiamo Shadow Root
// 'open' rende il Shadow DOM accessibile dall'esterno tramite hostElement.shadowRoot
// 'closed' nasconde il Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Aggiungiamo elementi all'interno del Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stili specifici per questo componente */
    h2 {
      color: blue;
    }
  </style>
  <h2>Intestazione all'interno del componente</h2>
  <p>Paragrafo all'interno del componente.</p>
`;

Caratteristiche:

• Slots: Permettono di inserire contenuto esterno in punti specifici all'interno del Shadow DOM.
• Shadow Parts: Permettono di stilizzare determinati elementi all'interno del Shadow DOM dall'esterno.

Il Shadow DOM è una componente chiave per creare web component (Web Components), fornendo una forte incapsulamento, necessario per creare elementi UI riutilizzabili e autosufficienti.