JavaScript Academy · Lezione

Shadow DOM e incapsulamento

Isoli stili e markup nelle shadow root.

Shadow DOM e incapsulamento è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è Shadow DOM

Shadow DOM fornisce a un elemento un albero DOM privato e incapsulato. Il markup e gli stili al suo interno sono isolati dal resto della pagina.

Il CSS esterno non penetra all'interno.
Il CSS interno non fuoriesce.
La struttura interna è nascosta dalle normali query del DOM.

attachShadow

Crei un albero shadow chiamando this.attachShadow({ mode: 'open' }). Il metodo restituisce una shadow root che può popolare come un normale nodo.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

Modalità open e closed

L'opzione mode controlla l'accesso dall'esterno:

'open' — la root è raggiungibile tramite element.shadowRoot.
'closed' — element.shadowRoot restituisce null; solo il Suo codice conserva il riferimento.

La maggior parte dei componenti utilizza 'open' per semplificare il debugging.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Riempire la shadow root

Imposti shadowRoot.innerHTML per creare il contenuto incapsulato. Questo markup non è visibile a document.querySelector.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Stili con ambito limitato

Un tag style all'interno della shadow root influisce solo su quella root. Lo stesso selettore esterno al componente non viene influenzato e gli stili della pagina non penetrano all'interno.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

Il selettore :host

All'interno degli stili shadow, :host seleziona l'elemento personalizzato stesso, cioè l'host dell'albero shadow. Lo utilizzi per definire lo stile del contenitore esterno del componente.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

L'isolamento degli stili in pratica

L'incapsulamento fa sì che gli autori dei componenti e gli autori delle pagine non debbano più contendersi i nomi delle classi. Una regola .title all'interno di un componente non influisce mai su un altro .title.

Nessun conflitto con il CSS globale.
I selettori semplici e generici tornano a essere sicuri.

Eseguire query nella shadow root

Per accedere ai nodi interni, esegua la query sulla shadow root, non sul documento. La shadow root supporta gli stessi metodi di query.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Gli eventi attraversano il confine

Molti eventi, come click, risalgono al di fuori di Shadow DOM, ma vengono ritargettizzati, così i listener esterni vedono l'elemento host e non il nodo interno. In questo modo l'incapsulamento viene preservato.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Stili ereditabili

Alcune proprietà CSS, come color e font-family, vengono ereditate attraverso il confine shadow perché l'ereditarietà scorre lungo l'albero composto. Può adottare l'aspetto della pagina facendo affidamento sull'ereditarietà o utilizzando proprietà CSS personalizzate.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Quando utilizzare Shadow DOM

Utilizzi Shadow DOM quando ha bisogno di un forte isolamento dello stile e del markup per un widget riutilizzabile. Lo eviti quando desidera che il componente erediti liberamente gli stili globali della pagina e vi partecipi.

Verifica rapida

Verifichi la Sua comprensione di Shadow DOM.

Riepilogo

Ha imparato a conoscere Shadow DOM:

attachShadow({ mode }) crea un albero isolato.
'open' espone shadowRoot; 'closed' la nasconde.
I tag style interni hanno un ambito limitato; :host definisce lo stile dell'elemento stesso.
Le query vengono eseguite sulla shadow root, non sul documento.
Gli eventi vengono ritargettizzati per preservare l'incapsulamento.

Ora riutilizzeremo il markup con template e slot.

Domande Frequenti

La lezione «Shadow DOM e incapsulamento» è gratuita?

Sì — il testo completo di «Shadow DOM e incapsulamento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Shadow DOM e incapsulamento»?

Isoli stili e markup nelle shadow root. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Shadow DOM e incapsulamento»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy