🦹 Cos'è lo Shadow DOM? Una guida semplice e completa

Pubblicato da

  


Quando si sviluppano applicazioni web moderne, ci si scontra spesso con problemi legati alla manutenzione del codice, alla riutilizzabilità dei componenti e, soprattutto, alla collisione degli stili CSS. Lo Shadow DOM è una delle soluzioni offerte dalle Web Components API per affrontare questi problemi.

In questo articolo scopriremo cos'è lo Shadow DOM, perché è utile, come si utilizza e vedremo alcuni esempi pratici.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

✅ Cos'è lo Shadow DOM?

Lo Shadow DOM è una tecnologia che permette di incapsulare una parte del DOM in un “dominio ombra” separato dal DOM principale della pagina (detto anche "light DOM").

Questo significa che:

  • Gli stili e gli script definiti all'interno dello Shadow DOM non influenzano il resto della pagina.
  • Allo stesso tempo, il resto della pagina non può influenzare direttamente lo Shadow DOM.
In breve: lo Shadow DOM crea una “mini-pagina” privata all'interno del tuo componente.

 

🧱 Perché usare lo Shadow DOM?

Ecco alcuni dei motivi principali per cui conviene usarlo:

  • Isolamento degli stili: Gli stili CSS nel tuo componente non entreranno in conflitto con quelli del resto della pagina o di altri componenti.
  • Incapsulamento del markup: Il contenuto del tuo componente è nascosto all'esterno, rendendo il codice più modulare e sicuro.
  • Componenti riutilizzabili: Puoi creare componenti web (Web Components) che si comportano in modo coerente ovunque vengano utilizzati.

🛠️ Come si usa lo Shadow DOM?

Vediamo come creare uno Shadow DOM in un Web Component personalizzato.

✅ Esempio di base

In JavaScript:

// Define a new class for the custom element
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const wrapper = document.createElement('div');
    wrapper.textContent = 'Hello from the shadow DOM!';
    wrapper.style.color = 'blue';

    shadow.appendChild(wrapper);
  }
}

customElements.define('my-element', MyElement);

Come si usa (in html):

<my-element></my-element>

🧪 Modalità open vs closed

Quando si crea uno Shadow DOM, si può scegliere tra due modalità:
  • open: consente di accedere allo shadow DOM tramite JavaScript (element.shadowRoot)
  • closed: impedisce l’accesso diretto (utile per maggiore incapsulamento)
const shadow = this.attachShadow({ mode: 'closed' });
// shadowRoot won't be accessible from outside

🎨 Styling nello Shadow DOM

Il CSS può essere definito direttamente nello Shadow DOM per garantirne l'isolamento.
const style = document.createElement('style');
style.textContent = `
  div {
    color: red;
    font-weight: bold;
  }
`;

shadow.appendChild(style);

🧬 Slot: collegare lo Shadow DOM al contenuto esterno

Puoi usare gli <slot> per permettere di inserire contenuti dinamici dall'esterno nel tuo Shadow DOM.

shadow.innerHTML = `
  <style>
    ::slotted(*) {
      color: green;
    }
  </style>
  <div>
    <slot></slot>
  </div>
`;
In HTML:
<my-element>
  <p>This text will be slotted inside!</p>
</my-element>

🚫 Limitazioni e considerazioni

  • Il debug può essere leggermente più complicato perché i contenuti shadow non sono immediatamente visibili nel DOM.
  • Alcuni strumenti di terze parti potrebbero non “vedere” correttamente il contenuto dello Shadow DOM.
  • Non tutti i framework JavaScript lo supportano nativamente allo stesso modo (anche se il supporto è migliorato).

📦 Conclusione

Lo Shadow DOM è una potente tecnologia per creare componenti web moderni, modulari e manutenibili. Grazie al suo isolamento, evita conflitti di stili e consente uno sviluppo più robusto.

Riassumendo, ti conviene usare lo Shadow DOM se:

  • Vuoi creare componenti riutilizzabili.
  • Hai bisogno di isolare stili e markup.
  • Stai lavorando con Web Components.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment