From 4b5f3d674f4cd86a1ef635f89b304c99f0a3f7b6 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sun, 28 Mar 2021 13:31:43 +0200
Subject: [PATCH 1/7] inizio traduzione articolo

---
 8-web-components/3-shadow-dom/article.md | 74 ++++++++++++------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md
index 92614f777..7c1716c9f 100644
--- a/8-web-components/3-shadow-dom/article.md
+++ b/8-web-components/3-shadow-dom/article.md
@@ -1,32 +1,32 @@
 # Shadow DOM
 
-Shadow DOM serves for encapsulation. It allows a component to have its very own "shadow" DOM tree, that can't be accidentally accessed from the main document, may have local style rules, and more.
+Lo Shadow DOM serve all'incapsulamento. Pemrmette al componente di avere il proprio DOM "shadow" (fantasma), al quale il documento principale non può accedere nemmeno accidentalmente, e può avere regole di stile con scope locale e molto altro acnora
 
-## Built-in shadow DOM
+## Shadow DOM built-in
 
-Did you ever think how complex browser controls are created and styled?
+Avete mai pensato a come i controlli del browser, così complessi, vengono creati e stilizzati?
 
-Such as `<input type="range">`:
+Prendiamo `<input type="range">` ad esempio:
 
 <p>
 <input type="range">
 </p>
 
-The browser uses DOM/CSS internally to draw them. That DOM structure is normally hidden from us, but we can see it in developer tools. E.g. in Chrome, we need to enable in Dev Tools "Show user agent shadow DOM" option.
+Il browser usa i DOM/CSS internamente per visualizzarli a schermo. Normalmente la struttura del DOM ci è invisibile, ma possiamo vederla negli strumenti dello sviluppatore dei browser. Ad esempio negli strumenti di sviluppo di Chrome, lo facciamo attivando, nelle impostazioni generiche, l'opzione "Show user agent shadow DOM".
 
-Then `<input type="range">` looks like this:
+Così facendo `<input type="range">` verrà mostrato in questo modo:
 
 ![](shadow-dom-range.png)
 
-What you see under `#shadow-root` is called "shadow DOM".
+Quello che vediamo alla voce `#shadow-root` viene chiamato "shadow DOM".
 
-We can't get built-in shadow DOM elements by regular JavaScript calls or selectors. These are not regular children, but a powerful encapsulation technique.
+Non possiamo lavorare sugli elementi built-in dello shadow DOM tramite normale chiamate o selettori CSS. Non sono nodi figli normali, ma una potente tecnica di incapsulamento.
 
-In the example above, we can see a useful attribute `pseudo`. It's non-standard, exists for historical reasons. We can use it style subelements with CSS, like this:
+Nell'esempio precendente, possiamo notare l'attributo `pseudo`, molto utile. Non è standard, esiste per ragioni storiche e possiamo usarlo per stilizzare i sottoelementi con i CSS, in questo modo:
 
 ```html run autorun
 <style>
-/* make the slider track red */
+/* colora la traccia di rosso */
 input::-webkit-slider-runnable-track {
   background: red;
 }
@@ -35,22 +35,22 @@ input::-webkit-slider-runnable-track {
 <input type="range">
 ```
 
-Once again, `pseudo` is a non-standard attribute. Chronologically, browsers first started to experiment with internal DOM structures to implement controls, and then, after time, shadow DOM was standardized to allow us, developers, to do the similar thing.
+Ripetiamolo, `pseudo` è un attributo non-standard. Cronologicamente, i browser hanno cominciato a sperimentare con le strutture interne del DOM per implementare dei controlli, e con il passare del tempo, lo shadow DOM è stato standardizzato per permettere a noi sviluppatori, di fare alla stessa maniera.
 
-Further on, we'll use the modern shadow DOM standard, covered by [DOM spec](https://dom.spec.whatwg.org/#shadow-trees) and other related specifications.
+Più avanti, utilizzeremo lo standard shadow DOM moderno, affrontato nella sezione delle [spacifiche DOM](https://dom.spec.whatwg.org/#shadow-trees) ed altre specifiche correlate.  
 
-## Shadow tree
+## Albero shadow
 
-A DOM element can have two types of DOM subtrees:
+Un elemento DOM può contenere due tipi di sottoalberi:
 
-1. Light tree -- a regular DOM subtree, made of HTML children. All subtrees that we've seen in previous chapters were "light".
-2. Shadow tree -- a hidden DOM subtree, not reflected in HTML, hidden from prying eyes.
+1. Albero light -- un normale sottoalbero DOM, fatto di figli HTML. Tutti i sottoalberi affrontati nei capitolo precedenti appartengono a questa categoria "light".
+2. Albero shadow -- un sottoalbero DOM nascosto, senza corrispettivo nell'HTML, nascosto da "occhi indiscreti".
 
-If an element has both, then the browser renders only the shadow tree. But we can setup a kind of composition between shadow and light trees as well. We'll see the details later in the chapter <info:slots-composition>.
+Se un elemento li ha entrambi, il browser renderizza solo l'albero shadow. Ma possiamo impostare una sorta di composizione tra gli alberi light e shadow. Vedremo in dettaglio l'argomento nell'apposita sezione <info:slots-composition>.
 
-Shadow tree can be used in Custom Elements to hide component internals and apply component-local styles.
+Gli alberi shadow possono essere usati nei Custom Elements per nascondere i componenti interni ed applicare gli stili locali del componente.
 
-For example, this `<show-hello>` element hides its internal DOM in shadow tree:
+Per esempio, questo elemento, `<show-hello>` nasconde il suo DOM interno nell'albero shadow:
 
 ```html run autorun height=60
 <script>
@@ -67,41 +67,41 @@ customElements.define('show-hello', class extends HTMLElement {
 <show-hello name="John"></show-hello>
 ```
 
-That's how the resulting DOM looks in Chrome dev tools, all the content is under "#shadow-root":
+Ecco come risulta il DOM, negli strumenti di sviluppo di Chrome, con il contenuto inserito in "#shadow-root":
 
 ![](shadow-dom-say-hello.png)
 
-First, the call to `elem.attachShadow({mode: …})` creates a shadow tree.
+Inizialmente, la chiamata a `elem.attachShadow({mode: …})` crea un albero shadow.
 
-There are two limitations:
-1. We can create only one shadow root per element.
-2. The `elem` must be either a custom element, or one of: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", or "span". Other elements, like `<img>`, can't host shadow tree.
+Ci sono due limitazioni:
+1. Possiamo creare solo una shadow root per ogni elemento.
+2. L'elemento `elem` deve essere, o un elemento personalizzato, o uno tra questi elementi: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", o "span". Altri elementi, come ad esempio, `<img>`, non possono contenere un albero shadow.
 
-The `mode` option sets the encapsulation level. It must have any of two values:
-- `"open"` -- the shadow root is available as `elem.shadowRoot`.
+L'opzione `mode` imposta il livello di incapsulamento. Le opzioni possibili sono:
+- `"open"` -- la shadow root è disponibile tramite `elem.shadowRoot`.
 
-    Any code is able to access the shadow tree of `elem`.   
-- `"closed"` -- `elem.shadowRoot` is always `null`.
+    L'albero shadow di `elem` è accessibile da qualunque codice.   
+- `"closed"` -- `elem.shadowRoot` è sempre `null`.
 
-    We can only access the shadow DOM by the reference returned by `attachShadow` (and probably hidden inside a class). Browser-native shadow trees, such as  `<input type="range">`, are closed. There's no way to access them.
+    Il DOM shadow, è accessibile esclusivamente dal riferimento restituito da `attachShadow` (il quale, con ogni probabilità, sarà nascosto dentro una classe. Alberi shadow nativi del browser come `<input type="range">` appartengono a questa categoria, e non c'è modo di accedervi.
 
-The [shadow root](https://dom.spec.whatwg.org/#shadowroot), returned by `attachShadow`, is like an element: we can use `innerHTML` or DOM methods, such as `append`, to populate it.
+La [shadow root](https://dom.spec.whatwg.org/#shadowroot), restituita con `attachShadow`, è come un elemento: possiamo usare `innerHTML` o i metodi DOM, come `append`, per popolarlo di elementi.
 
-The element with a shadow root is called a "shadow tree host", and is available as the shadow root `host` property:
+L'elemento con una shadow root viene invece chiamato "shadow tree host", ed è disponibile attraverso la proprietà `host` della shadow root:
 
 ```js
-// assuming {mode: "open"}, otherwise elem.shadowRoot is null
+// supponiamo di avere {mode: "open"}, altrimenti elem.shadowRoot sarebbe null
 alert(elem.shadowRoot.host === elem); // true
 ```
 
-## Encapsulation
+## Incapsulamnto
 
-Shadow DOM is strongly delimited from the main document:
+Vi è una marcata delimitazione tra il DOM shadow ed il documento principale:
 
-1. Shadow DOM elements are not visible to `querySelector` from the light DOM. In particular,  Shadow DOM elements may have ids that conflict with those in the light DOM. They must be unique only within the shadow tree.
-2. Shadow DOM has own stylesheets. Style rules from the outer DOM don't get applied.
+1. Gli elementi del DOM shadow non sono rilevabili tramite `querySelector` del Light DOM. In particolare, gli id degli elementi dello DOM Shadow, potrebbero andare in conflitto con quelli dell'albero del Light DOM.
+2. Lo Shadow DOM ha i suoi stylesheets. Le regole di stile del DOM esterno non vengono applicate.
 
-For example:
+Per esempio:
 
 ```html run untrusted height=40
 <style>

From 7a191ba396e624a417280d91a738adfed92c34e3 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sun, 11 Apr 2021 12:43:33 +0200
Subject: [PATCH 2/7] fine traduzione

---
 8-web-components/3-shadow-dom/article.md | 72 ++++++++++++------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md
index 7c1716c9f..0c45f2d4f 100644
--- a/8-web-components/3-shadow-dom/article.md
+++ b/8-web-components/3-shadow-dom/article.md
@@ -1,10 +1,10 @@
 # Shadow DOM
 
-Lo Shadow DOM serve all'incapsulamento. Pemrmette al componente di avere il proprio DOM "shadow" (fantasma), al quale il documento principale non può accedere nemmeno accidentalmente, e può avere regole di stile con scope locale e molto altro acnora
+Lo Shadow DOM serve all'incapsulamento e permette al componente di avere il proprio DOM "shadow" (fantasma), al quale il documento principale non può accedere nemmeno accidentalmente, può avere regole di stile con scope locale e molto altro.
 
 ## Shadow DOM built-in
 
-Avete mai pensato a come i controlli del browser, così complessi, vengono creati e stilizzati?
+Avete mai pensato a come, dei controlli così complessi come quelli del browser, vengono creati e stilizzati?
 
 Prendiamo `<input type="range">` ad esempio:
 
@@ -12,7 +12,7 @@ Prendiamo `<input type="range">` ad esempio:
 <input type="range">
 </p>
 
-Il browser usa i DOM/CSS internamente per visualizzarli a schermo. Normalmente la struttura del DOM ci è invisibile, ma possiamo vederla negli strumenti dello sviluppatore dei browser. Ad esempio negli strumenti di sviluppo di Chrome, lo facciamo attivando, nelle impostazioni generiche, l'opzione "Show user agent shadow DOM".
+Il browser usa la combinazione DOM e CSS internamente, per visualizzarli a schermo. Normalmente la struttura del DOM ci è invisibile, ma possiamo vederla negli strumenti dello sviluppatore dei browser. Ad esempio, negli strumenti di sviluppo di Chrome, si può fare attivando nelle impostazioni generiche, l'opzione "Show user agent shadow DOM".
 
 Così facendo `<input type="range">` verrà mostrato in questo modo:
 
@@ -22,7 +22,7 @@ Quello che vediamo alla voce `#shadow-root` viene chiamato "shadow DOM".
 
 Non possiamo lavorare sugli elementi built-in dello shadow DOM tramite normale chiamate o selettori CSS. Non sono nodi figli normali, ma una potente tecnica di incapsulamento.
 
-Nell'esempio precendente, possiamo notare l'attributo `pseudo`, molto utile. Non è standard, esiste per ragioni storiche e possiamo usarlo per stilizzare i sottoelementi con i CSS, in questo modo:
+Nell'esempio precedente, possiamo notare l'attributo `pseudo` che è molto utile. Non è standard, esiste per ragioni storiche e possiamo usarlo per stilizzare i sottoelementi tramite CSS, in questo modo:
 
 ```html run autorun
 <style>
@@ -35,22 +35,22 @@ input::-webkit-slider-runnable-track {
 <input type="range">
 ```
 
-Ripetiamolo, `pseudo` è un attributo non-standard. Cronologicamente, i browser hanno cominciato a sperimentare con le strutture interne del DOM per implementare dei controlli, e con il passare del tempo, lo shadow DOM è stato standardizzato per permettere a noi sviluppatori, di fare alla stessa maniera.
+Ripetiamolo ancora una volta, `pseudo` non è un attributo standard. Storicamente, i browser hanno cominciato a sperimentare con le strutture interne del DOM per implementare dei controlli, e con il passare del tempo, lo shadow DOM è stato standardizzato per permettere a noi sviluppatori, di fare alla stessa maniera.
 
-Più avanti, utilizzeremo lo standard shadow DOM moderno, affrontato nella sezione delle [spacifiche DOM](https://dom.spec.whatwg.org/#shadow-trees) ed altre specifiche correlate.  
+Più avanti, utilizzeremo lo standard shadow DOM moderno, nella sezione delle [spacifiche DOM](https://dom.spec.whatwg.org/#shadow-trees) ed altre specifiche correlate.  
 
-## Albero shadow
+## Shadow tree
 
 Un elemento DOM può contenere due tipi di sottoalberi:
 
-1. Albero light -- un normale sottoalbero DOM, fatto di figli HTML. Tutti i sottoalberi affrontati nei capitolo precedenti appartengono a questa categoria "light".
-2. Albero shadow -- un sottoalbero DOM nascosto, senza corrispettivo nell'HTML, nascosto da "occhi indiscreti".
+1. Light tree -- un normale sottoalbero DOM, fatto di figli HTML. Tutti i sottoalberi affrontati nei capitolo precedenti appartengono a questa categoria "light".
+2. Shadow tree -- un sottoalbero DOM nascosto, senza un elemento corrispondente nell'HTML, nascosto da "occhi indiscreti".
 
-Se un elemento li ha entrambi, il browser renderizza solo l'albero shadow. Ma possiamo impostare una sorta di composizione tra gli alberi light e shadow. Vedremo in dettaglio l'argomento nell'apposita sezione <info:slots-composition>.
+Se un elemento li ha entrambi, il browser renderizza solo lo shadow tree. Tuttavia possiamo impostare una sorta di composizione tra gli il light e lo shadow tree. Vedremo in dettaglio l'argomento nell'apposita sezione <info:slots-composition>.
 
-Gli alberi shadow possono essere usati nei Custom Elements per nascondere i componenti interni ed applicare gli stili locali del componente.
+Lo shadow tree può essere usato all'interno dei Custom Elements per nascondere i componenti interni ed applicare gli stili localmente all'interno componente.
 
-Per esempio, questo elemento, `<show-hello>` nasconde il suo DOM interno nell'albero shadow:
+Per esempio, questo elemento, `<show-hello>` nasconde il suo DOM interno dell' shadow tree:
 
 ```html run autorun height=60
 <script>
@@ -71,7 +71,7 @@ Ecco come risulta il DOM, negli strumenti di sviluppo di Chrome, con il contenut
 
 ![](shadow-dom-say-hello.png)
 
-Inizialmente, la chiamata a `elem.attachShadow({mode: …})` crea un albero shadow.
+Inizialmente, la chiamata a `elem.attachShadow({mode: …})` crea uno shadow tree.
 
 Ci sono due limitazioni:
 1. Possiamo creare solo una shadow root per ogni elemento.
@@ -83,7 +83,7 @@ L'opzione `mode` imposta il livello di incapsulamento. Le opzioni possibili sono
     L'albero shadow di `elem` è accessibile da qualunque codice.   
 - `"closed"` -- `elem.shadowRoot` è sempre `null`.
 
-    Il DOM shadow, è accessibile esclusivamente dal riferimento restituito da `attachShadow` (il quale, con ogni probabilità, sarà nascosto dentro una classe. Alberi shadow nativi del browser come `<input type="range">` appartengono a questa categoria, e non c'è modo di accedervi.
+    Il shadow DOM è accessibile esclusivamente dal riferimento restituito da `attachShadow` (il quale, con ogni probabilità, sarà nascosto dentro una classe. Shadow tree nativi del browser, come `<input type="range">`, appartengono a questa categoria, e non c'è modo di accedervi.
 
 La [shadow root](https://dom.spec.whatwg.org/#shadowroot), restituita con `attachShadow`, è come un elemento: possiamo usare `innerHTML` o i metodi DOM, come `append`, per popolarlo di elementi.
 
@@ -94,19 +94,19 @@ L'elemento con una shadow root viene invece chiamato "shadow tree host", ed è d
 alert(elem.shadowRoot.host === elem); // true
 ```
 
-## Incapsulamnto
+## Incapsulamento
 
-Vi è una marcata delimitazione tra il DOM shadow ed il documento principale:
+Vi è una marcata delimitazione tra ilo shadow DOM ed il documento principale:
 
-1. Gli elementi del DOM shadow non sono rilevabili tramite `querySelector` del Light DOM. In particolare, gli id degli elementi dello DOM Shadow, potrebbero andare in conflitto con quelli dell'albero del Light DOM.
-2. Lo Shadow DOM ha i suoi stylesheets. Le regole di stile del DOM esterno non vengono applicate.
+1. Gli elementi dello shadow DOM non sono rilevabili tramite `querySelector` del light DOM. In particolare, gli id degli elementi dello shadow DOM, potrebbero andare in conflitto con quelli dell'albero del light DOM.
+2. Lo shadow DOM ha i suoi fogli di stile e le regole di stile del DOM esterno non vengono applicate.
 
 Per esempio:
 
 ```html run untrusted height=40
 <style>
 *!*
-  /* document style won't apply to the shadow tree inside #elem (1) */
+  /* lo stile del documento non viene applicato allo shadow tree contenuto in #elem (1) */
 */!*
   p { color: red; }
 </style>
@@ -116,7 +116,7 @@ Per esempio:
 <script>
   elem.attachShadow({mode: 'open'});
 *!*
-    // shadow tree has its own style (2)
+    // shadow tree possiede un proprio stile (2)
 */!*
   elem.shadowRoot.innerHTML = `
     <style> p { font-weight: bold; } </style>
@@ -124,34 +124,34 @@ Per esempio:
   `;
 
 *!*
-  // <p> is only visible from queries inside the shadow tree (3)
+  // <p> e' visibile solamente da queries dentro lo shadow tree (3)
 */!*
   alert(document.querySelectorAll('p').length); // 0
   alert(elem.shadowRoot.querySelectorAll('p').length); // 1
 </script>  
 ```
 
-1. The style from the document does not affect the shadow tree.
-2. ...But the style from the inside works.
-3. To get elements in shadow tree, we must query from inside the tree.
+1. Lo stile del documento non influenza lo shadow tree.
+2. ...ma lo stile all'interno sì.
+3. Per avere gli elementi dentro lo shadow tree, dobbiamo fare le query da dentro l'albero.
 
-## References
+## Riferimenti
 
 - DOM: <https://dom.spec.whatwg.org/#shadow-trees>
-- Compatibility: <https://caniuse.com/#feat=shadowdomv1>
-- Shadow DOM is mentioned in many other specifications, e.g. [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) specifies that shadow root has `innerHTML`.
+- Compatibilità: <https://caniuse.com/#feat=shadowdomv1>
+- Lo shadow DOM viene menzionato in molte altre specifiche, ad esempio in [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) specifica che la shadow root possiede la proprietà `innerHTML`.
 
 
-## Summary
+## Riepilogo
 
-Shadow DOM is a way to create a component-local DOM.
+Lo "Shadow DOM" è una modalità di creazione di un componente DOM locale.
 
-1. `shadowRoot = elem.attachShadow({mode: open|closed})` -- creates shadow DOM for `elem`. If `mode="open"`, then it's accessible as `elem.shadowRoot` property.
-2. We can populate `shadowRoot` using `innerHTML` or other DOM methods.
+1. Il comando `shadowRoot = elem.attachShadow({mode: open|closed})` crea uno shadow DOM per `elem`. Se `mode="open"`, allora sarà possibile accedervi attraverso la proprietà `elem.shadowRoot`.
+2. Possiamo popolare `shadowRoot` usando `innerHTML` o altri metodi DOM.
 
-Shadow DOM elements:
-- Have their own ids space,
-- Invisible to JavaScript selectors from the main document, such as `querySelector`,
-- Use styles only from the shadow tree, not from the main document.
+Gli elementi dello shadow DOM:
+- Hanno la loro area per gli id
+- Sono invisibili ai selettori JavaScript dal documento principale, se cercati con `querySelector`
+- Usano gli stili dello shadow tree, e non quelli del documento principale.
 
-Shadow DOM, if exists, is rendered by the browser instead of so-called "light DOM" (regular children). In the chapter <info:slots-composition> we'll see how to compose them.
+Lo shadow DOM, se esiste, viene renderizzato dal browser al posto del cosiddetto "light DOM" (normali nodi figli). Nel capitolo <info:slots-composition> vedremo come comporli.

From 2bfccd26036cab181662a207bf7a42758f9ad54c Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sun, 11 Apr 2021 12:54:26 +0200
Subject: [PATCH 3/7] fine traduzione e correzione

---
 8-web-components/3-shadow-dom/article.md | 60 ++++++++++++------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md
index 0c45f2d4f..2771b1c06 100644
--- a/8-web-components/3-shadow-dom/article.md
+++ b/8-web-components/3-shadow-dom/article.md
@@ -1,6 +1,6 @@
 # Shadow DOM
 
-Lo Shadow DOM serve all'incapsulamento e permette al componente di avere il proprio DOM "shadow" (fantasma), al quale il documento principale non può accedere nemmeno accidentalmente, può avere regole di stile con scope locale e molto altro.
+Lo Shadow DOM serve all'incapsulamento e permette al componente di avere il proprio DOM "shadow", al quale il documento principale non può accedere nemmeno accidentalmente. Inoltre può avere regole di stile con scope locale e molto altro ancora.
 
 ## Shadow DOM built-in
 
@@ -18,11 +18,11 @@ Così facendo `<input type="range">` verrà mostrato in questo modo:
 
 ![](shadow-dom-range.png)
 
-Quello che vediamo alla voce `#shadow-root` viene chiamato "shadow DOM".
+Quello che vediamo alla voce `#shadow-root` viene chiamato "Shadow DOM".
 
-Non possiamo lavorare sugli elementi built-in dello shadow DOM tramite normale chiamate o selettori CSS. Non sono nodi figli normali, ma una potente tecnica di incapsulamento.
+Non possiamo lavorare sugli elementi built-in dello Shadow DOM tramite normale chiamate o selettori CSS. Non sono nodi figli normali, ma una potente tecnica di incapsulamento.
 
-Nell'esempio precedente, possiamo notare l'attributo `pseudo` che è molto utile. Non è standard, esiste per ragioni storiche e possiamo usarlo per stilizzare i sottoelementi tramite CSS, in questo modo:
+Nell'esempio precedente, possiamo notare l'attributo `pseudo` che è molto utile. Non è un attributo standard, esiste per ragioni storiche e possiamo usarlo per stilizzare i sottoelementi tramite CSS, in questo modo:
 
 ```html run autorun
 <style>
@@ -35,9 +35,9 @@ input::-webkit-slider-runnable-track {
 <input type="range">
 ```
 
-Ripetiamolo ancora una volta, `pseudo` non è un attributo standard. Storicamente, i browser hanno cominciato a sperimentare con le strutture interne del DOM per implementare dei controlli, e con il passare del tempo, lo shadow DOM è stato standardizzato per permettere a noi sviluppatori, di fare alla stessa maniera.
+Ripetiamolo ancora una volta, `pseudo` non è un attributo standard. Storicamente, i browser hanno cominciato a sperimentare con le strutture interne del DOM per implementare dei controlli, e con il passare del tempo, lo Shadow DOM è stato standardizzato per permettere a noi sviluppatori, di fare alla stessa maniera.
 
-Più avanti, utilizzeremo lo standard shadow DOM moderno, nella sezione delle [spacifiche DOM](https://dom.spec.whatwg.org/#shadow-trees) ed altre specifiche correlate.  
+Più avanti, utilizzeremo lo standard Shadow DOM moderno, nella sezione delle [spacifiche DOM](https://dom.spec.whatwg.org/#shadow-trees) ed altre specifiche correlate.  
 
 ## Shadow tree
 
@@ -46,11 +46,11 @@ Un elemento DOM può contenere due tipi di sottoalberi:
 1. Light tree -- un normale sottoalbero DOM, fatto di figli HTML. Tutti i sottoalberi affrontati nei capitolo precedenti appartengono a questa categoria "light".
 2. Shadow tree -- un sottoalbero DOM nascosto, senza un elemento corrispondente nell'HTML, nascosto da "occhi indiscreti".
 
-Se un elemento li ha entrambi, il browser renderizza solo lo shadow tree. Tuttavia possiamo impostare una sorta di composizione tra gli il light e lo shadow tree. Vedremo in dettaglio l'argomento nell'apposita sezione <info:slots-composition>.
+Se un elemento li ha entrambi, il browser renderizza solo lo Shadow tree. Tuttavia possiamo impostare una sorta di composizione tra gli il light e lo Shadow tree. Vedremo in dettaglio l'argomento nell'apposita sezione <info:slots-composition>.
 
-Lo shadow tree può essere usato all'interno dei Custom Elements per nascondere i componenti interni ed applicare gli stili localmente all'interno componente.
+Lo Shadow tree può essere usato all'interno dei Custom Elements per nascondere i componenti interni ed applicare gli stili localmente all'interno componente.
 
-Per esempio, questo elemento, `<show-hello>` nasconde il suo DOM interno dell' shadow tree:
+Per esempio, questo elemento, `<show-hello>` nasconde il suo DOM interno dell' Shadow tree:
 
 ```html run autorun height=60
 <script>
@@ -71,23 +71,23 @@ Ecco come risulta il DOM, negli strumenti di sviluppo di Chrome, con il contenut
 
 ![](shadow-dom-say-hello.png)
 
-Inizialmente, la chiamata a `elem.attachShadow({mode: …})` crea uno shadow tree.
+Inizialmente, la chiamata a `elem.attachShadow({mode: …})` crea uno Shadow tree.
 
 Ci sono due limitazioni:
-1. Possiamo creare solo una shadow root per ogni elemento.
-2. L'elemento `elem` deve essere, o un elemento personalizzato, o uno tra questi elementi: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", o "span". Altri elementi, come ad esempio, `<img>`, non possono contenere un albero shadow.
+1. Possiamo creare solo una Shadow root per ogni elemento.
+2. L'elemento `elem` deve essere, o un elemento personalizzato, o uno tra questi elementi: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", o "span". Altri elementi, come ad esempio, `<img>`, non possono contenere uno Shadow tree.
 
 L'opzione `mode` imposta il livello di incapsulamento. Le opzioni possibili sono:
-- `"open"` -- la shadow root è disponibile tramite `elem.shadowRoot`.
+- `"open"` -- la Shadow root è disponibile tramite `elem.shadowRoot`.
 
-    L'albero shadow di `elem` è accessibile da qualunque codice.   
+    Lo Shadow tree di `elem` è accessibile da qualunque punto del codice.   
 - `"closed"` -- `elem.shadowRoot` è sempre `null`.
 
-    Il shadow DOM è accessibile esclusivamente dal riferimento restituito da `attachShadow` (il quale, con ogni probabilità, sarà nascosto dentro una classe. Shadow tree nativi del browser, come `<input type="range">`, appartengono a questa categoria, e non c'è modo di accedervi.
+    Lo Shadow DOM è accessibile esclusivamente dal riferimento restituito da `attachShadow` (il quale, con ogni probabilità, sarà nascosto dentro una classe. Shadow tree nativi del browser, come `<input type="range">`, appartengono a questa categoria, e non c'è modo di accedervi.
 
-La [shadow root](https://dom.spec.whatwg.org/#shadowroot), restituita con `attachShadow`, è come un elemento: possiamo usare `innerHTML` o i metodi DOM, come `append`, per popolarlo di elementi.
+La [Shadow root](https://dom.spec.whatwg.org/#shadowroot), restituita con `attachShadow`, è come un elemento: possiamo usare `innerHTML` o i metodi DOM, come `append`, per popolarlo di elementi.
 
-L'elemento con una shadow root viene invece chiamato "shadow tree host", ed è disponibile attraverso la proprietà `host` della shadow root:
+L'elemento con una Shadow root viene invece chiamato "Shadow tree host", ed è disponibile attraverso la proprietà `host` della Shadow root:
 
 ```js
 // supponiamo di avere {mode: "open"}, altrimenti elem.shadowRoot sarebbe null
@@ -96,17 +96,17 @@ alert(elem.shadowRoot.host === elem); // true
 
 ## Incapsulamento
 
-Vi è una marcata delimitazione tra ilo shadow DOM ed il documento principale:
+Vi è una separazione marcata tra lo Shadow DOM ed il documento principale:
 
-1. Gli elementi dello shadow DOM non sono rilevabili tramite `querySelector` del light DOM. In particolare, gli id degli elementi dello shadow DOM, potrebbero andare in conflitto con quelli dell'albero del light DOM.
-2. Lo shadow DOM ha i suoi fogli di stile e le regole di stile del DOM esterno non vengono applicate.
+1. Gli elementi dello Shadow DOM non sono rilevabili tramite `querySelector` del light DOM. In particolare, gli id degli elementi dello Shadow DOM, potrebbero andare in conflitto con quelli dell'albero del light DOM.
+2. Lo Shadow DOM ha i suoi fogli di stile e le regole di stile del DOM esterno non vengono applicate.
 
 Per esempio:
 
 ```html run untrusted height=40
 <style>
 *!*
-  /* lo stile del documento non viene applicato allo shadow tree contenuto in #elem (1) */
+  /* lo stile del documento non viene applicato allo Shadow tree contenuto in #elem (1) */
 */!*
   p { color: red; }
 </style>
@@ -116,7 +116,7 @@ Per esempio:
 <script>
   elem.attachShadow({mode: 'open'});
 *!*
-    // shadow tree possiede un proprio stile (2)
+    // Lo Shadow tree possiede un proprio stile (2)
 */!*
   elem.shadowRoot.innerHTML = `
     <style> p { font-weight: bold; } </style>
@@ -124,34 +124,34 @@ Per esempio:
   `;
 
 *!*
-  // <p> e' visibile solamente da queries dentro lo shadow tree (3)
+  // <p> e' visibile solamente da queries dentro lo Shadow tree (3)
 */!*
   alert(document.querySelectorAll('p').length); // 0
   alert(elem.shadowRoot.querySelectorAll('p').length); // 1
 </script>  
 ```
 
-1. Lo stile del documento non influenza lo shadow tree.
+1. Lo stile del documento non influenza lo Shadow tree.
 2. ...ma lo stile all'interno sì.
-3. Per avere gli elementi dentro lo shadow tree, dobbiamo fare le query da dentro l'albero.
+3. Per avere gli elementi dentro lo Shadow tree, dobbiamo fare le query da dentro l'albero.
 
 ## Riferimenti
 
 - DOM: <https://dom.spec.whatwg.org/#shadow-trees>
 - Compatibilità: <https://caniuse.com/#feat=shadowdomv1>
-- Lo shadow DOM viene menzionato in molte altre specifiche, ad esempio in [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) specifica che la shadow root possiede la proprietà `innerHTML`.
+- Lo Shadow DOM viene menzionato in molte altre specifiche, ad esempio in [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) specifica che la Shadow root possiede la proprietà `innerHTML`.
 
 
 ## Riepilogo
 
 Lo "Shadow DOM" è una modalità di creazione di un componente DOM locale.
 
-1. Il comando `shadowRoot = elem.attachShadow({mode: open|closed})` crea uno shadow DOM per `elem`. Se `mode="open"`, allora sarà possibile accedervi attraverso la proprietà `elem.shadowRoot`.
+1. Il comando `shadowRoot = elem.attachShadow({mode: open|closed})` crea uno Shadow DOM per `elem`. Se `mode="open"`, allora sarà possibile accedervi attraverso la proprietà `elem.shadowRoot`.
 2. Possiamo popolare `shadowRoot` usando `innerHTML` o altri metodi DOM.
 
-Gli elementi dello shadow DOM:
+Gli elementi dello Shadow DOM:
 - Hanno la loro area per gli id
 - Sono invisibili ai selettori JavaScript dal documento principale, se cercati con `querySelector`
-- Usano gli stili dello shadow tree, e non quelli del documento principale.
+- Usano gli stili dello Shadow tree, e non quelli del documento principale.
 
-Lo shadow DOM, se esiste, viene renderizzato dal browser al posto del cosiddetto "light DOM" (normali nodi figli). Nel capitolo <info:slots-composition> vedremo come comporli.
+Lo Shadow DOM, se esiste, viene renderizzato dal browser al posto del cosiddetto "light DOM" (normali nodi figli). Nel capitolo <info:slots-composition> vedremo come comporli.

From 8b0a1d61bc064dbd303305a2410f86a880e91607 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sat, 17 Apr 2021 12:10:45 +0200
Subject: [PATCH 4/7] Update 8-web-components/3-shadow-dom/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 8-web-components/3-shadow-dom/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md
index 2771b1c06..ffe63751e 100644
--- a/8-web-components/3-shadow-dom/article.md
+++ b/8-web-components/3-shadow-dom/article.md
@@ -37,7 +37,7 @@ input::-webkit-slider-runnable-track {
 
 Ripetiamolo ancora una volta, `pseudo` non è un attributo standard. Storicamente, i browser hanno cominciato a sperimentare con le strutture interne del DOM per implementare dei controlli, e con il passare del tempo, lo Shadow DOM è stato standardizzato per permettere a noi sviluppatori, di fare alla stessa maniera.
 
-Più avanti, utilizzeremo lo standard Shadow DOM moderno, nella sezione delle [spacifiche DOM](https://dom.spec.whatwg.org/#shadow-trees) ed altre specifiche correlate.  
+Più avanti, utilizzeremo lo standard Shadow DOM moderno, nella sezione delle [specifiche DOM](https://dom.spec.whatwg.org/#shadow-trees) ed altre specifiche correlate.  
 
 ## Shadow tree
 

From e61d600182fbd69c34b3ef7da7a710faf99136bd Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sat, 17 Apr 2021 12:10:56 +0200
Subject: [PATCH 5/7] Update 8-web-components/3-shadow-dom/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 8-web-components/3-shadow-dom/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md
index ffe63751e..255d7a05a 100644
--- a/8-web-components/3-shadow-dom/article.md
+++ b/8-web-components/3-shadow-dom/article.md
@@ -6,7 +6,7 @@ Lo Shadow DOM serve all'incapsulamento e permette al componente di avere il prop
 
 Avete mai pensato a come, dei controlli così complessi come quelli del browser, vengono creati e stilizzati?
 
-Prendiamo `<input type="range">` ad esempio:
+Prendiamo `<input type="range">` come esempio:
 
 <p>
 <input type="range">

From 9bea119078489de79ff38ccb17ed660afa2e9f0a Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sat, 17 Apr 2021 12:11:03 +0200
Subject: [PATCH 6/7] Update 8-web-components/3-shadow-dom/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 8-web-components/3-shadow-dom/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md
index 255d7a05a..c8e996799 100644
--- a/8-web-components/3-shadow-dom/article.md
+++ b/8-web-components/3-shadow-dom/article.md
@@ -43,7 +43,7 @@ Più avanti, utilizzeremo lo standard Shadow DOM moderno, nella sezione delle [s
 
 Un elemento DOM può contenere due tipi di sottoalberi:
 
-1. Light tree -- un normale sottoalbero DOM, fatto di figli HTML. Tutti i sottoalberi affrontati nei capitolo precedenti appartengono a questa categoria "light".
+1. Light tree -- un normale sottoalbero DOM, fatto di figli HTML. Tutti i sottoalberi affrontati nei capitoli precedenti appartengono a questa categoria "light".
 2. Shadow tree -- un sottoalbero DOM nascosto, senza un elemento corrispondente nell'HTML, nascosto da "occhi indiscreti".
 
 Se un elemento li ha entrambi, il browser renderizza solo lo Shadow tree. Tuttavia possiamo impostare una sorta di composizione tra gli il light e lo Shadow tree. Vedremo in dettaglio l'argomento nell'apposita sezione <info:slots-composition>.

From 6a7471799f68acd0d691623d26ec48f753ff8e12 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sat, 17 Apr 2021 12:11:19 +0200
Subject: [PATCH 7/7] Update 8-web-components/3-shadow-dom/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 8-web-components/3-shadow-dom/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md
index c8e996799..6a743fddd 100644
--- a/8-web-components/3-shadow-dom/article.md
+++ b/8-web-components/3-shadow-dom/article.md
@@ -12,7 +12,7 @@ Prendiamo `<input type="range">` come esempio:
 <input type="range">
 </p>
 
-Il browser usa la combinazione DOM e CSS internamente, per visualizzarli a schermo. Normalmente la struttura del DOM ci è invisibile, ma possiamo vederla negli strumenti dello sviluppatore dei browser. Ad esempio, negli strumenti di sviluppo di Chrome, si può fare attivando nelle impostazioni generiche, l'opzione "Show user agent shadow DOM".
+Il browser usa la combinazione DOM e CSS internamente, per visualizzarli a schermo. Normalmente la struttura del DOM ci è invisibile, ma possiamo visualizzarla negli strumenti dello sviluppatore dei browser. Ad esempio, negli strumenti di sviluppo di Chrome, si può attivarne la visualizzazione nelle impostazioni generiche, l'opzione "Show user agent shadow DOM".
 
 Così facendo `<input type="range">` verrà mostrato in questo modo:
 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/javascript-tutorial/it.javascript.info/pull/290.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/javascript-tutorial/it.javascript.info/pull/290.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/javascript-tutorial/it.javascript.info/pull/290.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/javascript-tutorial/it.javascript.info/pull/290.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>