Cos'è Shadow DOM?

Shadow DOM — è uno standard web che consente di incapsulare l'albero DOM e gli stili all'interno di un componente, isolandoli dal resto del documento.

Concetti principali:

• Shadow tree: Albero DOM proprio, allegato a un elemento.
• Shadow boundary: Confine che separa il Shadow DOM dal documento principale.
• Shadow host: Elemento a cui è allegato il Shadow DOM.
• Shadow root: Nodo radice del Shadow tree.

Vantaggi:

• Isolamento degli stili: Gli stili definiti all'interno del Shadow DOM non influenzano gli elementi esterni, e viceversa.
• Isolamento del DOM: La struttura DOM all'interno del Shadow DOM non è visibile né accessibile direttamente dal documento principale, prevenendo conflitti di id e classi.
• Incapsulamento: Crea componenti modulari e riutilizzabili.

Creazione del Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // modalità: 'open' - accessibile tramite JavaScript; 'closed' - no

shadowRoot.innerHTML = `
  <style>
    /* Stili solo per questo Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Questo è il contenuto del Shadow DOM</p>
`;