La com­ples­si­tà dei progetti web è aumentata ra­pi­da­men­te negli ultimi anni. I siti web odierni non solo pre­sen­ta­no un complesso intreccio di codici HTML, CSS e Ja­va­Script, ma integrano ge­ne­ral­men­te anche sempre più contenuti (widget, immagini, video, ecc.) pro­ve­nien­ti da altre fonti, come i social network, le piat­ta­for­me di streaming o le Content Delivery Network. Chi non utilizza iFrame può trovare in Shadow DOM un’ec­cel­len­te al­ter­na­ti­va per integrare queste tipologie di contenuti esterni.

In questo articolo vi spie­ghia­mo perché questo sot­to­li­vel­lo del Document Object Model (DOM) è im­por­tan­te, per quali altri scenari è indicato e come im­ple­men­tar­lo nel vostro sito web.

Cosa si cela dietro Shadow DOM?

Shadow DOM è una forma su­bor­di­na­ta del Document Object Model (DOM) standard nonché uno dei quattro pilastri ele­men­ta­ri dei Web Component stan­dar­diz­za­ti nel 2012 dal consorzio W3C. Questo DOM “ombra” è generato au­to­ma­ti­ca­men­te dai più comuni browser dal codice HTML come un normale DOM, ma non ha validità per l’intero progetto web, bensì solo per il/i com­po­nen­te/i di progetto espli­ci­ta­to/i al suo interno. Inoltre, gli Shadow DOM di­stin­guo­no gli elementi contenuti dalle istru­zio­ni di pro­get­ta­zio­ne e strut­tu­ra­zio­ne che hanno validità per tutto il progetto, come ad esempio de­ter­mi­na­te istru­zio­ni CSS. Sem­pli­fi­can­do, possiamo dire che gli Shadow DOM sono capsule di codice in­di­pen­den­ti all’interno di un normale DOM, che pos­sie­do­no un proprio ambito di validità.

N.B.

La de­no­mi­na­zio­ne di “modello” è so­stan­zial­men­te inesatta, sia per DOM sia per Shadow DOM. Per la pre­ci­sio­ne, in entrambi i casi si tratta di in­ter­fac­ce per l’accesso ai dati. Il modello di oggetto di base ha im­por­tan­za soltanto per la validità di queste in­ter­fac­ce.

Come sono strut­tu­ra­ti gli Shadow DOM?

Uti­liz­za­re gli Shadow DOM significa che, oltre alla struttura generale dei documenti, che comprende la struttura DOM di tutto il progetto, esiste anche un numero ar­bi­tra­rio di Shadow Trees (“alberi ombra”). Ognuno di questi alberi, le cui radici vengono de­no­mi­na­te Shadow Root (“radici ombra”), contiene i propri elementi e un proprio design. Questi alberi sono sempre assegnati a un de­ter­mi­na­to elemento dell’albero dei documenti so­vraor­di­na­to o di un altro Shadow Tree. In entrambi i casi si parla di Shadow Host (“host ombra”). Il passaggio tra un DOM normale e un DOM nascosto è detto Shadow Boundary (“confine ombra”).

Immagine: Shadow DOM: rappresentazione grafica
Il contenuto di uno Shadow Tree non è in­fluen­za­to dall’esterno e a sua volta non influisce sui contenuti situati all’esterno.

Come funziona esat­ta­men­te l’utilizzo e l’im­ple­men­ta­zio­ne degli Shadow DOM?

Per uti­liz­za­re l’in­ter­fac­cia Shadow DOM in un progetto web, non è ne­ces­sa­rio in­stal­la­re né integrare software esterni. Poiché, da un punto di vista tecnico, si tratta sem­pli­ce­men­te di creare un sot­toal­be­ro nel codice sorgente, un nuovo Shadow DOM può essere im­ple­men­ta­to in qualunque momento in­ter­ve­nen­do nel documento HTML della propria ap­pli­ca­zio­ne web. Il rendering funziona in seguito insieme al DOM completo so­vraor­di­na­to, così che anche in tal senso non è ne­ces­sa­ria alcuna ulteriore ope­ra­zio­ne.

La sem­pli­ci­tà con la quale è possibile integrare capsule DOM nascoste e su­bor­di­na­te risulta chiara dall’esempio seguente, in cui al documento HTML viene aggiunto con un semplice Ja­va­Script uno Shadow DOM con elemento <p>, incluse istru­zio­ni di design spe­ci­fi­che:

<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
    // Creare lo Shadow DOM per lo Shadow Host:
    var shadow = document.querySelector('#hostElement').createShadowRoot();
    // Creare un elemento HTML nello Shadow DOM:
shadow.innerHTML = '<p>Questo testo è contenuto nello Shadow DOM.</p>';
    // Definire lo stile dell’elemento HTML nello Shadow DOM:
shadow.innerHTML += '<style>p { color: red; }</style>';
</script>
</body>
</html>

Lo script per l’im­ple­men­ta­zio­ne dello Shadow DOM è formato da tre com­po­nen­ti: per prima cosa viene generato il sotto-documento nascosto, nel secondo passaggio al documento viene aggiunto un elemento di testo semplice, infine con il terzo com­po­nen­te viene spe­ci­fi­ca­to anche il colore di questo testo (in questo caso: “red”, ossia rosso).

N.B.

Per poter comandare uno Shadow DOM dall’esterno tramite Ja­va­Script, lo stato del metodo element.sha­do­w­Root deve essere inoltre impostato su “open” (aperto). Al contrario, se in questa posizione è definito lo stato “closed”, l’accesso al DOM nascosto non viene accordato.

Per quali scenari è indicato lo Shadow DOM?

Gli Shadow DOM vi offrono uno strumento ec­cel­len­te per gestire singoli elementi del vostro progetto web in modo in­di­pen­den­te dal resto del sito, senza dover ricorrere a speciali tec­no­lo­gie come iFrames. Inoltre, at­tual­men­te sono sup­por­ta­ti da tutti i browser più diffusi, come tutte le tecniche dei moderni Web Component, senza li­mi­ta­zio­ni. Pertanto, se volete rea­liz­za­re de­ter­mi­na­ti com­po­nen­ti o una de­ter­mi­na­ta sezione del vostro sito web in modo to­tal­men­te in­di­pen­den­te dalle istru­zio­ni di design e dalle strutture valide per tutti i documenti, i DOM nascosti co­sti­tui­sco­no una scelta valida e fa­cil­men­te im­ple­men­ta­bi­le, in par­ti­co­la­re nell’ambito di progetti complessi.

Tuttavia, non tutti gli elementi HTML possono fungere da Shadow Host. Se, ad esempio, applicate questa tecnica a un file immagine, otterrete un errore e un messaggio cor­ri­spon­den­te. Nello specifico, gli Shadow DOM sono limitati ai seguenti com­po­nen­ti HTML:

  • article
  • aside
  • bloc­k­quo­te
  • body
  • div
  • footer
  • h1, h2, h3, h4, h5, h6
  • header
  • main
  • nav
  • p
  • section
  • span
7wSOoG_REKc.jpg Per visualizzare questo video, sono necessari i cookie di terze parti. Puoi accedere e modificare le impostazioni dei cookie qui.
Vai al menu prin­ci­pa­le