Che cos'è il Shadow DOM?

Questo articolo spiega che cos'è il Shadow DOM.

YouTube Video

Comprendere il Shadow DOM

Il Shadow DOM è una funzionalità potente dello standard dei Web Components, che consente l'incapsulamento degli stili e della struttura DOM all'interno dei componenti. Questa funzionalità impedisce interferenze tra stili e script dei componenti e il documento principale.

Che cos'è il Shadow DOM?

Il Shadow DOM offre un modo per creare un albero DOM limitato associato a un elemento DOM normale. Questo albero ombra è isolato dal documento generale: gli stili e gli script esterni non lo influenzano e i suoi stili e script interni non si propagano.

Ad esempio, se crei un componente personalizzato per un pulsante usando il Shadow DOM, i suoi stili non interferiranno con altri elementi della pagina. Allo stesso modo, elementi con lo stesso nome di classe non entreranno in conflitto.

Benefici del Shadow DOM

1. Incapsulamento: Il Shadow DOM separa stili e funzionalità, prevenendo conflitti con stili e script globali.

2. Riutilizzabilità: I componenti costruiti con il Shadow DOM possono essere riutilizzati in diversi progetti senza preoccuparsi di conflitti di stile.

3. Manutenibilità: L'incapsulamento consente ai componenti di essere autonomi in termini di logica e stili, facilitando il debugging e la manutenzione.

Creazione del Shadow DOM

Per usare il Shadow DOM, è necessario collegare una radice ombra a un elemento HTML. Ecco un esempio semplice:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Spiegazione

1. Elemento Host: Un elemento DOM normale a cui è collegata la radice ombra (in questo caso #shadow-host).

2. Radice Ombra: La radice dell'albero ombra creata utilizzando attachShadow.

3. Modalità: In modalità open, JavaScript esterno può accedere alla radice ombra tramite element.shadowRoot. D'altro canto, la modalità closed non consente l'accesso.

Stilizzazione all'interno del Shadow DOM

Il Shadow DOM ha il proprio ambito di stile. Gli stili definiti all'interno dell'albero ombra si applicano solo agli elementi di quell'albero. Ecco un esempio:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Anche se ci sono stili conflittuali nel documento principale, i paragrafi all'interno dell'albero ombra rimangono inalterati:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

I paragrafi all'interno del Shadow DOM rimangono verdi, mentre i paragrafi esterni sono rossi.

Eventi all'interno del Shadow DOM

Gli eventi all'interno del Shadow DOM sono simili agli eventi del DOM regolare ma possono comportarsi diversamente in termini di propagazione a causa dell'incapsulamento. Gli eventi che si verificano all'interno dell'albero ombra possono propagarsi fino all'elemento host ma non si propagano direttamente all'intero documento.

Ecco un esempio:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Quando si clicca sul pulsante, entrambi i listener vengono attivati, dimostrando il comportamento della propagazione degli eventi.

Slot: Distribuzione del contenuto del Light DOM

Gli slot consentono di proiettare contenuti dal Light DOM nel Shadow DOM. Ecco un esempio:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

Nel documento principale, puoi fare come segue:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Gli elementi slot all'interno del Shadow DOM mostrano il contenuto del Light DOM con l'attributo slot corrispondente.

Conclusione

Il Shadow DOM è uno strumento fondamentale per costruire componenti web robusti, riutilizzabili e manutenibili. Incapsulando stili e funzionalità, riduce il rischio di conflitti e semplifica la gestione del codice.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video