Cos'è Shadow DOM?

Shadow DOM è uno standard web che consente di incapsulare HTML, CSS e JavaScript in blocchi separati e isolati dal documento principale.

Concetti principali:

• Shadow Host: Elemento DOM a cui viene applicato Shadow DOM.
• Shadow Tree: Albero DOM isolato.
• Shadow Boundary: Limite tra Shadow DOM e documento principale.
• Shadow Root: Nodo radice del Shadow Tree. Creato con element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root accessibile dall'esterno tramite element.shadowRoot.
  • closed: Shadow Root non accessibile dall'esterno.

Vantaggi:

• Incapsulamento degli stili: Gli stili definiti nel Shadow DOM non fuoriescono e non influenzano il documento principale. Gli stili del documento principale di default non influenzano il Shadow DOM, ma questo può essere controllato.
• Incapsulamento del DOM: Gli elementi all'interno del Shadow DOM non sono visibili nell'albero DOM principale, prevenendo incroci accidentali di selettori e manipolazioni.
• Incapsulamento del comportamento: La logica e gli handler degli eventi possono essere isolati nel Shadow DOM.

Esempio di creazione di Shadow DOM:

// Creiamo un nuovo elemento DIV
const hostElement = document.createElement('div');
// Attacchiamo il Shadow DOM all'elemento
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Aggiungiamo contenuto al Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stile applicabile solo all'interno di questo Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Questo è un testo all'interno del Shadow DOM</p>
`;

// Aggiungiamo l'elemento host al documento principale
document.body.appendChild(hostElement);

Applicazioni:

• Creazione di componenti web riutilizzabili.
• Isolamento degli stili di librerie esterne.
• Protezione dei dettagli interni del componente da interferenze esterne.

Caratteristiche nel lavorare con gli stili:

• Gli stili esterni di default non influenzano il Shadow DOM.
• Si può usare :host per stilizzare l'Shadow Host dall'interno del Shadow DOM.
• Si può usare :host-context() per stilizzare in base al contesto dell'Shadow Host.
• Si può usare ::slotted() pseudo-elemento per stilizzare gli elementi inseriti negli slot (<slot>).

<my-component>
  <!-- Questo elemento sarà "inviato" nello slot all'interno del Shadow DOM -->
  <span>Contenuto dello slot</span>
</my-component>

// Dentro il Shadow DOM del componente my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Stile per l'elemento inserito nello slot con nome "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Contenuto principale del componente</div>
  <slot></slot> <!-- Qui verrà mostrato il contenuto dello slot -->
`;

Shadow DOM fa parte della specifica Web Components.