- Shadow DOM \u2014 \u201cDOM dentro al DOM\u201d<\/a>
- Creazione dello Shadow DOM<\/a>
- Incapsulamento: protezione da JavaScript e CSS<\/a><\/li>
- Styling all’interno dello Shadow DOM<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ol><\/div>
Shadow DOM \u2014 \u201cDOM dentro al DOM\u201d<\/h3>\n\n\n\n
Il DOM (Document Object Model) \u00e8 un’interfaccia di programmazione (API) per il codice di una pagina che la rappresenta come una struttura ad albero di oggetti.<\/p>\n\n\n\n
Ogni elemento HTML (ad esempio,
<p><\/code>,<div><\/code>,<img><\/code>), ogni attributo e ogni pezzo di testo \u00e8 un \u201cnodo\u201d separato in questo albero. Utilizzando JavaScript, possiamo interagire con questi nodi per modificare dinamicamente la pagina: cambiare testo, aggiungere stili, creare nuovi elementi o rimuovere quelli esistenti. In sostanza, il DOM \u00e8 un modello \u201cvivo\u201d del documento con cui il codice interagisce.<\/p>\n\n\n\nMa questa apertura ha un lato negativo. Quando creiamo un componente complesso e riutilizzabile (ad esempio, un lettore video personalizzato o un widget calendario), la sua struttura interna e i suoi stili diventano vulnerabili. Gli stili CSS della pagina principale possono accidentalmente \u201cpenetrare\u201d nel componente e romperne l’aspetto. Allo stesso modo, il codice JavaScript della pagina pu\u00f2 modificare involontariamente gli elementi interni del componente, interrompendone la logica.<\/p>\n\n\n\n
Per risolvere questo problema, esiste lo Shadow DOM<\/strong>.<\/p>\n\n\n\n
In sostanza, lo Shadow DOM \u00e8 un \u201cDOM dentro al DOM\u201d<\/strong>. \u00c8 un albero di elementi nascosto, collegato a un normale elemento della pagina (chiamato \u201chost\u201d o \u201cospite\u201d), ma isolato dal DOM principale. Permette allo sviluppatore di creare un confine sigillato attorno alla struttura interna di un componente, proteggendolo dal mondo esterno.<\/p>\n\n\n\n
Lo Shadow DOM consente di collegare alberi DOM nascosti a elementi nell’albero DOM regolare. Questo albero \u201combra\u201d inizia con una radice shadow<\/strong> (shadow root), sotto la quale \u00e8 possibile aggiungere qualsiasi elemento, proprio come nel DOM normale.<\/p>\n\n\n\n
Ci sono diversi termini chiave relativi allo Shadow DOM che dovresti conoscere. Lo Shadow host<\/strong> (o ospite) \u00e8 un normale nodo del DOM a cui \u00e8 collegato uno Shadow DOM. L’albero shadow<\/strong> (Shadow tree) \u00e8 l’albero del DOM all’interno dello Shadow DOM. Il confine shadow<\/strong> (Shadow boundary) \u00e8 il punto in cui finisce lo Shadow DOM e inizia il DOM regolare. Infine, la radice shadow<\/strong> (Shadow root) \u00e8 il nodo radice dell’albero shadow.<\/p>\n\n\n\n
![\"DOM\"\/](\"..\/..\/assets\/shadow_dom\/file.png\")
<\/figure>\n\n\n\n\u00c8 possibile manipolare i nodi all’interno dello Shadow DOM come si fa con i nodi normali. La differenza \u00e8 che nessun codice all’interno dello Shadow DOM pu\u00f2 influenzare nulla al di fuori di esso, garantendo un incapsulamento affidabile.<\/p>\n\n\n\n
Prima che lo Shadow DOM diventasse disponibile per gli sviluppatori web, i browser lo utilizzavano gi\u00e0 per incapsulare la struttura interna degli elementi standard. Ad esempio, l’elemento
<video><\/code> con i controlli. Tutto ci\u00f2 che vedi nel DOM \u00e8 il tag<video><\/code>, ma esso contiene diversi pulsanti e altri controlli all’interno del suo Shadow DOM.<\/p>\n\n\n\nCreazione dello Shadow DOM<\/h4>\n\n\n\n
Lo Shadow DOM pu\u00f2 essere creato sia in modo imperativo tramite JavaScript, sia in modo dichiarativo direttamente nell’HTML.<\/p>\n\n\n\n
In modo imperativo con JavaScript<\/h5>\n\n\n\n
Questo metodo \u00e8 perfetto per le applicazioni renderizzate dal client. Selezioniamo l’elemento host e invochiamo su di esso il metodo
attachShadow()<\/code>.<\/p>\n\n\n\n<!-- Markup HTML -->\n<div id="host"><\/div>\n<span>Non sono nello Shadow DOM<\/span><\/code><\/pre>\n\n\n\n\/\/ Trova l'host e collega lo Shadow DOM\nconst host = document.querySelector("#host");\nconst shadow = host.attachShadow({ mode: "open" });\n\n\/\/ Crea e aggiungi elementi all'albero shadow\nconst span = document.createElement("span");\nspan.textContent = "Sono nello Shadow DOM";\nshadow.appendChild(span);<\/code><\/pre>\n\n\n\nIl risultato sulla pagina sar\u00e0 simile a questo:<\/p>\n\n\n\n
\n
Sono nello Shadow DOM
Non sono nello Shadow DOM<\/p>\n<\/blockquote>\n\n\n\nIn modo dichiarativo con HTML<\/h5>\n\n\n\n
Per le applicazioni in cui il rendering lato server \u00e8 importante, \u00e8 possibile definire lo Shadow DOM in modo dichiarativo utilizzando un elemento
<template><\/code> con l’attributoshadowrootmode<\/code>.<\/p>\n\n\n\n<div id="host">\n <template shadowrootmode="open">\n <p>Questo paragrafo \u00e8 all'interno dello Shadow DOM.<\/p>\n <style>\n p { color: red; } \/* Questi stili saranno isolati *\/\n <\/style>\n <\/template>\n<\/div><\/code><\/pre>\n\n\n\nQuando il browser elabora questo codice, crea automaticamente una radice shadow per il
<div><\/code> e inserisce il contenuto del<template><\/code> al suo interno. Il tag<template><\/code> stesso scompare dall’albero DOM principale.<\/p>\n\n\n\nIncapsulamento: protezione da JavaScript e CSS<\/h4>\n\n\n\n
Il vantaggio principale dello Shadow DOM \u00e8 l’isolamento. Vediamo come funziona.<\/p>\n\n\n\n
Incapsulamento di JavaScript<\/h5>\n\n\n\n
Aggiungiamo un pulsante che cerca di modificare tutti gli elementi
<span><\/code> sulla pagina.<\/p>\n\n\n\n\/\/ ... Codice di creazione dello Shadow DOM ...\n\nconst upper = document.querySelector("#upper-button");\nupper.addEventListener("click", () => {\n \/\/ Questo selettore cerca in tutto il documento\n const spans = document.querySelectorAll("span");\n for (const span of spans) {\n span.textContent = span.textContent.toUpperCase();\n }\n});<\/code><\/pre>\n\n\n\nQuando si fa clic sul pulsante, solo lo
<span><\/code> nel documento principale cambia. L’elemento all’interno dello Shadow DOM rimane invariato perch\u00e9document.querySelectorAll()<\/code> non pu\u00f2 \u201cguardare\u201d oltre il confine dello shadow.<\/p>\n\n\n\nAccedere allo Shadow DOM: la propriet\u00e0
shadowRoot<\/code> e gli alberi nidificati<\/h5>\n\n\n\nQuando chiamiamo
host.attachShadow({ mode: "open" })<\/code>, creiamo uno Shadow DOM \u201caperto\u201d. Ci\u00f2 significa che possiamo accedere al suo contenuto dall’esterno tramitehost.shadowRoot<\/code>.<\/p>\n\n\n\n\/\/ Trova gli span solo all'interno dell'albero shadow di un host specifico\nconst spansInShadow = host.shadowRoot.querySelectorAll("span");<\/code><\/pre>\n\n\n\nSe si utilizza
mode: "closed"<\/code>,host.shadowRoot<\/code> restituiscenull<\/code>, e l’accesso esterno all’albero shadow \u00e8 bloccato. Non si tratta di un meccanismo di sicurezza rigoroso, ma piuttosto di una convenzione per gli sviluppatori che indica che le parti interne del componente non dovrebbero essere toccate.<\/p>\n\n\n\nLavorare con alberi shadow nidificati<\/strong><\/p>\n\n\n\n
In architetture di componenti complesse, un elemento personalizzato pu\u00f2 contenerne altri, ognuno con il proprio Shadow DOM. Per accedere a un elemento in un albero shadow profondamente nidificato, \u00e8 necessario attraversare ogni
shadowRoot<\/code> in sequenza.<\/p>\n\n\n\nUna struttura di esempio potrebbe essere: un componente
<nmbrs-form><\/code> (il modulo principale), che al suo interno ha un<div><\/code> contenente un<nmbrs-button><\/code> (un pulsante personalizzato), e all’interno di questo<nmbrs-button><\/code> si trova un vero e proprio elemento<button><\/code> HTML.<\/p>\n\n\n\nPer accedere a questo pulsante dal contesto globale, il percorso \u00e8:<\/p>\n\n\n\n
\/\/ 1. Trova il componente radice nel documento principale\nconst formComponent = document.querySelector('nmbrs-form');\n\n\/\/ 2. Entra nel suo albero shadow\nconst shadowRoot1 = formComponent.shadowRoot;\n\n\/\/ 3. Trova il componente pulsante nidificato\nconst buttonComponent = shadowRoot1.querySelector('div div.btn-container nmbrs-button');\n\n\/\/ 4. Entra nell'albero shadow di questo componente\nconst shadowRoot2 = buttonComponent.shadowRoot;\n\n\/\/ 5. Infine, trova l'elemento pulsante\nconst finalButton = shadowRoot2.querySelector('button#button');<\/code><\/pre>\n\n\n\nCome una singola catena:<\/p>\n\n\n\n
const button = document.querySelector('nmbrs-form').shadowRoot\n .querySelector('div div.btn-container nmbrs-button').shadowRoot\n .querySelector('button#button');<\/code><\/pre>\n\n\n\nQuesta lunga catena dimostra la potenza dell’incapsulamento: per raggiungere i dettagli interni, \u00e8 necessario attraversare esplicitamente ogni \u201cconfine\u201d. Questo rende il codice pi\u00f9 prevedibile e protegge i componenti da modifiche accidentali.<\/p>\n\n\n\n
Incapsulamento di CSS<\/h5>\n\n\n\n
Gli stili definiti nella pagina principale non influenzano gli elementi all’interno dello Shadow DOM.<\/p>\n\n\n\n
\/* Questo stile si applica solo agli span nel documento principale *\/\nspan {\n color: blue;\n border: 1px solid black;\n}<\/code><\/pre>\n\n\n\nLo
<span><\/code> all’interno dell’albero shadow non ricever\u00e0 questi stili. Questo risolve il problema dei conflitti di stile accidentali.<\/p>\n\n\n\nStyling all’interno dello Shadow DOM<\/h4>\n\n\n\n
Gli stili definiti all’interno dell’albero shadow, a loro volta, non influenzano la pagina principale. Ci sono due modi principali per aggiungerli.<\/p>\n\n\n\n
1. Fogli di stile costruibili (Constructable Stylesheets)<\/h5>\n\n\n\n
Questo metodo consente di creare un oggetto
CSSStyleSheet<\/code> in JavaScript e di applicarlo a uno o pi\u00f9 alberi shadow. \u00c8 efficiente se si hanno stili condivisi per molti componenti.<\/p>\n\n\n\nconst sheet = new CSSStyleSheet();\nsheet.replaceSync("span { color: red; border: 2px dotted black; }");\n\nconst shadow = host.attachShadow({ mode: "open" });\n\/\/ Applica il foglio di stile alla radice shadow\nshadow.adoptedStyleSheets = [sheet];<\/code><\/pre>\n\n\n\n2. L’elemento
<style><\/code><\/h5>\n\n\n\nUn modo semplice e dichiarativo \u00e8 inserire un tag
<style><\/code> direttamente all’interno dell’albero shadow (spesso all’interno di un<template><\/code>).<\/p>\n\n\n\n<template id="my-element">\n <style>\n span {\n color: red;\n border: 2px dotted black;\n }\n <\/style>\n <span>Sono nello Shadow DOM<\/span>\n<\/template>```\n\n#### Shadow DOM e Custom Elements: un'accoppiata perfetta\n\nLa piena potenza dello Shadow DOM si rivela durante la creazione di **Custom Elements** (Elementi Personalizzati). Senza incapsulamento, sarebbero estremamente fragili.\n\nUn elemento personalizzato \u00e8 una classe che estende `HTMLElement`. Tipicamente, l'elemento stesso agisce come host dello shadow, e la sua struttura interna viene creata all'interno dell'albero shadow.\n\nEsempio di un semplice componente `<filled-circle>`:<\/code><\/pre>\n\n\n\njavascript
class FilledCircle extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: “open” });<\/p>\n\n\n\n\/\/ Crea l'implementazione interna (es. un cerchio SVG)\nconst svg = document.createElementNS("http:\/\/www.w3.org\/2000\/svg", "svg");\nconst circle = document.createElementNS("http:\/\/www.w3.org\/2000\/svg", "circle");\ncircle.setAttribute("r", "50");\ncircle.setAttribute("cx", "50");\ncircle.setAttribute("cy", "50");\n\/\/ Il colore proviene dall'attributo dell'host\ncircle.setAttribute("fill", this.getAttribute("color"));\n\nsvg.appendChild(circle);\nshadow.appendChild(svg);<\/code><\/pre>\n\n\n\n}
}
customElements.define(“filled-circle”, FilledCircle);<\/p>\n\n\n\nOra possiamo usarlo in HTML come un normale tag senza preoccuparci della sua struttura interna:<\/code><\/pre>\n\n\n\nhtml
“`<\/p>\n\n\n\nOgnuno di questi componenti sar\u00e0 completamente incapsulato e protetto dalla pagina esterna.<\/p>\n","protected":false},"excerpt":{"rendered":"
Lo Shadow DOM permette di creare un \u201cDOM dentro il DOM\u201d, fornendo incapsulamento per la struttura interna e gli stili dei componenti. Questo protegge gli elementi personalizzati da interferenze esterne di JavaScript e CSS, garantisce un comportamento prevedibile, facilita l\u2019annidamento sicuro e rende i componenti complessi pi\u00f9 robusti e manutenibili. In combinazione con i Custom Elements, consente di costruire interfacce isolate, riutilizzabili e affidabili.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[1],"tags":[867],"class_list":["post-2389","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-tag-dom"],"acf":[],"_links":{"self":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts\/2389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/comments?post=2389"}],"version-history":[{"count":0,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts\/2389\/revisions"}],"wp:attachment":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/media?parent=2389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/categories?post=2389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/tags?post=2389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Styling all’interno dello Shadow DOM<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ol><\/div>
- Incapsulamento: protezione da JavaScript e CSS<\/a><\/li>
- Creazione dello Shadow DOM<\/a>