From 2890176a25821bb03b2c0036266ca4cdee5227ad Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sun, 11 Apr 2021 13:05:07 +0200
Subject: [PATCH 1/5] inizio

---
 8-web-components/4-template-element/article.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index d0fe12af0..1950ebd99 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -1,9 +1,9 @@
 
-# Template element
+# Elemento Template
 
-A built-in `<template>` element serves as a storage for HTML markup templates. The browser ignores it contents, only checks for syntax validity, but we can access and use it in JavaScript, to create other elements.
+Un elemento `<template>`  built-in funziona come uno storage per i templates del markup HTML. Il browser ne ignora il contenuto, controllando solamente la validità della sintassi, ma possiamo accedervi ed usarli via JavaScript, per creare altri elementi.
 
-In theory, we could create any invisible element somewhere in HTML for HTML markup storage purposes. What's special about `<template>`?
+In teoria, possiamo creare qualunque elemento invisibile in qualunque punto dell'HTML, allo scopo di salvare del markup HTML. Cosa possiamo dire su `<template>`?
 
 First, its content can be any valid HTML, even if it normally requires a proper enclosing tag.
 

From ef5e2dd76c6cbecf56c6adaeabc39ad756aef3ac Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Fri, 16 Apr 2021 10:49:16 +0200
Subject: [PATCH 2/5] fine traduzione articolo

---
 .../4-template-element/article.md             | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index 1950ebd99..1f5278b62 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -3,22 +3,22 @@
 
 Un elemento `<template>`  built-in funziona come uno storage per i templates del markup HTML. Il browser ne ignora il contenuto, controllando solamente la validità della sintassi, ma possiamo accedervi ed usarli via JavaScript, per creare altri elementi.
 
-In teoria, possiamo creare qualunque elemento invisibile in qualunque punto dell'HTML, allo scopo di salvare del markup HTML. Cosa possiamo dire su `<template>`?
+In teoria, possiamo creare qualunque elemento invisibile in qualunque punto dell'HTML, al solo scopo di salvare del markup HTML. Cosa possiamo dire su `<template>`?
 
-First, its content can be any valid HTML, even if it normally requires a proper enclosing tag.
+Prima di tutto il contenuto può essere un qaualunque tipo di HTML valido, anche se, normalmente richiede un tag di inclusione appropriato.
 
-For example, we can put there a table row `<tr>`:
+Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
 ```html
 <template>
   <tr>
-    <td>Contents</td>
+    <td>Contenuti</td>
   </tr>
 </template>
 ```
 
-Usually, if we try to put `<tr>` inside, say, a `<div>`, the browser detects the invalid DOM structure and "fixes" it, adds `<table>` around. That's not what we want. On the other hand, `<template>` keeps exactly what we place there.
+Solitamente, se proviamo a inserire un `<tr>` per esempio dentro un `<div>`, il browser riconoscerà una struttura non valida, "correggendola", aggiungendovi una tabella attorno. Questo non è il comportamento designato, e d'altra parte `<template>` mantiene le cose esattamente come le inseriamo.
 
-We can put styles and scripts into `<template>` as well:
+Possiamo anche inserire stili e scripts dentro i `<template>`:
 
 ```html
 <template>
@@ -31,17 +31,17 @@ We can put styles and scripts into `<template>` as well:
 </template>
 ```
 
-The browser considers `<template>` content "out of the document": styles are not applied, scripts are not executed, `<video autoplay>` is not run, etc.
+Il browser considera il contenuto di `<template>` "avulso dal documento": gli stili non verranno applicati, gli script non verranno eseguiti, i `<video autoplay>` non verranno partiranno in automatico, etc.
 
-The content becomes live (styles apply, scripts run etc) when we insert it into the document.
+Il contenuto diventa vivo (gli stili vengono applicati, gli script vengono eseguiti, etc) solo quando andiamo ad inserirlo dentro il documento.
 
-## Inserting template
+## Inserimento del template
 
-The template content is available in its `content` property as a [DocumentFragment](info:modifying-document#document-fragment) -- a special type of DOM node.
+Il contenuto del template è disponibile nella proprietà `content` come [DocumentFragment](info:modifying-document#document-fragment), un particolare tipo di nodo DOM.
 
-We can treat it as any other DOM node, except one special property: when we insert it somewhere, its children are inserted instead.
+Possiamo trattarlo come ogni altro nodo del DOM, tranne per una sua peculiarità: quando lo inseriamo da qualche parte, come DocumentFragment, vengono inseriti i suoi figli.
 
-For example:
+Per esempio:
 
 ```html run
 <template id="tmpl">
@@ -55,16 +55,16 @@ For example:
   let elem = document.createElement('div');
 
 *!*
-  // Clone the template content to reuse it multiple times
+  // Clona il contenuto del template per riutilizzarlo più volte
   elem.append(tmpl.content.cloneNode(true));
 */!*
 
   document.body.append(elem);
-  // Now the script from <template> runs
+  // Ora lo script dentro <template> viene eseguito
 </script>
 ```
 
-Let's rewrite a Shadow DOM example from the previous chapter using `<template>`:
+Riscriviamo un esempio di Shadow DOM, preso dal capitolo precedente, usando però `<template>`:
 
 ```html run untrusted autorun="no-epub" height=60
 <template id="tmpl">
@@ -72,7 +72,7 @@ Let's rewrite a Shadow DOM example from the previous chapter using `<template>`:
   <p id="message"></p>
 </template>
 
-<div id="elem">Click me</div>
+<div id="elem">Cliccami</div>
 
 <script>
   elem.onclick = function() {
@@ -82,14 +82,14 @@ Let's rewrite a Shadow DOM example from the previous chapter using `<template>`:
     elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*)
 */!*
 
-    elem.shadowRoot.getElementById('message').innerHTML = "Hello from the shadows!";
+    elem.shadowRoot.getElementById('message').innerHTML = "Saluti dalle ombre!";
   };
 </script>
 ```
 
-In the line `(*)` when we clone and insert `tmpl.content`, as its `DocumentFragment`, its children (`<style>`, `<p>`) are inserted instead.
+Nella riga `(*)` quando cloniamo ed inseriamo `tmpl.content`, come `DocumentFragment`, vengono inseriti i suoi figli (`<style>`, `<p>`).
 
-They form the shadow DOM:
+Questi formano lo shadow DOM:
 
 ```html
 <div id="elem">
@@ -99,18 +99,18 @@ They form the shadow DOM:
 </div>
 ```
 
-## Summary
+## Riepilogo
 
-To summarize:
+Per riepilogare:
 
-- `<template>` content can be any syntactically correct HTML.
-- `<template>` content is considered "out of the document", so it doesn't affect anything.
-- We can access `template.content` from JavaScript, clone it to reuse in a new component.
+- il contenuto di `<template>` può essere qualunque HTML sintatticamente corretto.
+- i contenuto di `<template>` viene considerato "avulso dal documento", quindi non modificherà o eseguirà alcunché.
+- Possiamo accedere a `template.content` via JavaScript, clonarlo per poterlo riutilizzare in un nuovo componente.
 
-The `<template>` tag is quite unique, because:
+Il tag `<template>` è unico, perché:
 
-- The browser checks HTML syntax inside it (as opposed to using a template string inside a script).
-- ...But still allows use of any top-level HTML tags, even those that don't make sense without proper wrappers (e.g. `<tr>`).
-- The content becomes interactive: scripts run, `<video autoplay>` plays etc, when inserted into the document.
+- Il browser controlla la sintassi HTML al suo interno (diversamente dall'uso di un template string dentro uno script).
+- ...Tuttavia è permesso l'uso di tag HTML top-level, anche quelli che non avrebbero alcun senso se privi del loro appropriato contenitore (per esempio i `<tr>`).
+- Il contenuto diventa interattivo (gli scripts vengono eseguiti, i `<video autoplay>` partono, etc) quando viene inserito dentro il documento.
 
-The `<template>` element does not feature any iteration mechanisms, data binding or variable substitutions, but we can implement those on top of it.
+L'elemento `<template>` non comprende alcun tipo di meccanismo di interazione, data binding o sostituzioni di variabili, ma possiamo implementarli su di essi.

From f766297836e1c906468a5b8edf7a24bfbb4ccd49 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 20 Apr 2021 22:32:42 +0200
Subject: [PATCH 3/5] correzioni

---
 .../4-template-element/article.md             | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index 1f5278b62..66b02b166 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -1,11 +1,11 @@
 
 # Elemento Template
 
-Un elemento `<template>`  built-in funziona come uno storage per i templates del markup HTML. Il browser ne ignora il contenuto, controllando solamente la validità della sintassi, ma possiamo accedervi ed usarli via JavaScript, per creare altri elementi.
+L'elemento built-in `<template>` funziona come uno storage per i templates del markup HTML. Il browser ignora il suo contenuto, controllandone solamente la validità della sintassi, ma possiamo accedervi ed usarli via JavaScript, per creare altri elementi.
 
-In teoria, possiamo creare qualunque elemento invisibile in qualunque punto dell'HTML, al solo scopo di salvare del markup HTML. Cosa possiamo dire su `<template>`?
+In teoria, possiamo creare qualunque elemento invisibile in qualunque punto dell'HTML, al solo scopo di salvare del markup HTML. Cos'altro possiamo dire su `<template>`?
 
-Prima di tutto il contenuto può essere un qaualunque tipo di HTML valido, anche se, normalmente richiede un tag di inclusione appropriato.
+Prima di tutto il contenuto può essere qualunque HTML valido, anche se, normalmente richiede un tag di inclusione appropriato.
 
 Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
 ```html
@@ -16,9 +16,9 @@ Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
 </template>
 ```
 
-Solitamente, se proviamo a inserire un `<tr>` per esempio dentro un `<div>`, il browser riconoscerà una struttura non valida, "correggendola", aggiungendovi una tabella attorno. Questo non è il comportamento designato, e d'altra parte `<template>` mantiene le cose esattamente come le inseriamo.
+Solitamente, se proviamo a inserire un `<tr>` per esempio dentro un `<div>`, il browser riconoscerà una struttura non valida, "correggendola", aggiungendovi una tabella attorno. Questo non è il comportamento corretto, ma d'altra parte `<template>` mantiene le cose esattamente come le inseriamo.
 
-Possiamo anche inserire stili e scripts dentro i `<template>`:
+Dentro i tag `<template>` possiamo anche inserire stili e scripts:
 
 ```html
 <template>
@@ -31,15 +31,15 @@ Possiamo anche inserire stili e scripts dentro i `<template>`:
 </template>
 ```
 
-Il browser considera il contenuto di `<template>` "avulso dal documento": gli stili non verranno applicati, gli script non verranno eseguiti, i `<video autoplay>` non verranno partiranno in automatico, etc.
+Il browser considera il contenuto di `<template>` "avulso dal documento": gli stili non verranno applicati, gli script non verranno eseguiti, i `<video autoplay>` non partiranno in automatico, etc.
 
-Il contenuto diventa vivo (gli stili vengono applicati, gli script vengono eseguiti, etc) solo quando andiamo ad inserirlo dentro il documento.
+Il contenuto prende vita (gli stili vengono applicati, gli script vengono eseguiti, etc) solo quando viene inseririto dentro il documento.
 
 ## Inserimento del template
 
 Il contenuto del template è disponibile nella proprietà `content` come [DocumentFragment](info:modifying-document#document-fragment), un particolare tipo di nodo DOM.
 
-Possiamo trattarlo come ogni altro nodo del DOM, tranne per una sua peculiarità: quando lo inseriamo da qualche parte, come DocumentFragment, vengono inseriti i suoi figli.
+Possiamo trattarlo come ogni altro nodo del DOM, tranne per una sua peculiarità: quando lo inseriamo da qualche parte, come DocumentFragment, vengono inseriti solo i suoi figli.
 
 Per esempio:
 
@@ -55,7 +55,7 @@ Per esempio:
   let elem = document.createElement('div');
 
 *!*
-  // Clona il contenuto del template per riutilizzarlo più volte
+  // Clona il contenuto del template per riutilizzarlo piu' volte
   elem.append(tmpl.content.cloneNode(true));
 */!*
 
@@ -101,16 +101,14 @@ Questi formano lo shadow DOM:
 
 ## Riepilogo
 
-Per riepilogare:
-
 - il contenuto di `<template>` può essere qualunque HTML sintatticamente corretto.
-- i contenuto di `<template>` viene considerato "avulso dal documento", quindi non modificherà o eseguirà alcunché.
-- Possiamo accedere a `template.content` via JavaScript, clonarlo per poterlo riutilizzare in un nuovo componente.
+- il contenuto di `<template>` essendo considerato "avulso dal documento", non modificherà, nè eseguirà alcunché al suo interno.
+- Possiamo accedere a `template.content` via JavaScript, ed anche clonarlo per poterlo riutilizzare in un nuovo componente.
 
-Il tag `<template>` è unico, perché:
+Il tag `<template>` ha delle pecurialità uniche, in quanto:
 
 - Il browser controlla la sintassi HTML al suo interno (diversamente dall'uso di un template string dentro uno script).
 - ...Tuttavia è permesso l'uso di tag HTML top-level, anche quelli che non avrebbero alcun senso se privi del loro appropriato contenitore (per esempio i `<tr>`).
 - Il contenuto diventa interattivo (gli scripts vengono eseguiti, i `<video autoplay>` partono, etc) quando viene inserito dentro il documento.
 
-L'elemento `<template>` non comprende alcun tipo di meccanismo di interazione, data binding o sostituzioni di variabili, ma possiamo implementarli su di essi.
+L'elemento `<template>` non comprende alcun tipo di meccanismo di interazione, data binding o sostituzioni di variabili, ma possiamo implementarli.

From f22a2e36cfe11846c48d4733ebd8ef5582910db3 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sun, 25 Apr 2021 23:24:11 +0200
Subject: [PATCH 4/5] Apply suggestions from code review

Co-authored-by: Dorin David <70648503+Dorin-David@users.noreply.github.com>
---
 8-web-components/4-template-element/article.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index 66b02b166..06a95deb8 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -7,7 +7,7 @@ In teoria, possiamo creare qualunque elemento invisibile in qualunque punto dell
 
 Prima di tutto il contenuto può essere qualunque HTML valido, anche se, normalmente richiede un tag di inclusione appropriato.
 
-Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
+Per esempio, possiamo inserire la riga di una tabella `<tr>`:
 ```html
 <template>
   <tr>
@@ -16,7 +16,7 @@ Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
 </template>
 ```
 
-Solitamente, se proviamo a inserire un `<tr>` per esempio dentro un `<div>`, il browser riconoscerà una struttura non valida, "correggendola", aggiungendovi una tabella attorno. Questo non è il comportamento corretto, ma d'altra parte `<template>` mantiene le cose esattamente come le inseriamo.
+Solitamente, se proviamo a inserire un `<tr>`, per esempio, dentro un `<div>`, il browser riconoscerà una struttura non valida, "correggendola", aggiungendovi una tabella attorno. Questo non è il comportamento corretto, ma d'altra parte `<template>` mantiene le cose esattamente come le inseriamo.
 
 Dentro i tag `<template>` possiamo anche inserire stili e scripts:
 
@@ -102,7 +102,7 @@ Questi formano lo shadow DOM:
 ## Riepilogo
 
 - il contenuto di `<template>` può essere qualunque HTML sintatticamente corretto.
-- il contenuto di `<template>` essendo considerato "avulso dal documento", non modificherà, nè eseguirà alcunché al suo interno.
+- il contenuto di `<template>` essendo considerato "avulso dal documento", non modificherà, né eseguirà alcunché al suo interno.
 - Possiamo accedere a `template.content` via JavaScript, ed anche clonarlo per poterlo riutilizzare in un nuovo componente.
 
 Il tag `<template>` ha delle pecurialità uniche, in quanto:

From 655ae6bc8800b692c5968d5072d15142ab94fbd6 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Mon, 26 Apr 2021 21:23:48 +0200
Subject: [PATCH 5/5] Apply suggestions from code review

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 8-web-components/4-template-element/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index 06a95deb8..caa163c0c 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -33,7 +33,7 @@ Dentro i tag `<template>` possiamo anche inserire stili e scripts:
 
 Il browser considera il contenuto di `<template>` "avulso dal documento": gli stili non verranno applicati, gli script non verranno eseguiti, i `<video autoplay>` non partiranno in automatico, etc.
 
-Il contenuto prende vita (gli stili vengono applicati, gli script vengono eseguiti, etc) solo quando viene inseririto dentro il documento.
+Il contenuto prende vita (gli stili vengono applicati, gli script vengono eseguiti, etc) solo quando viene inserito dentro il documento.
 
 ## Inserimento del template
 
@@ -105,7 +105,7 @@ Questi formano lo shadow DOM:
 - il contenuto di `<template>` essendo considerato "avulso dal documento", non modificherà, né eseguirà alcunché al suo interno.
 - Possiamo accedere a `template.content` via JavaScript, ed anche clonarlo per poterlo riutilizzare in un nuovo componente.
 
-Il tag `<template>` ha delle pecurialità uniche, in quanto:
+Il tag `<template>` ha delle peculiarità uniche, in quanto:
 
 - Il browser controlla la sintassi HTML al suo interno (diversamente dall'uso di un template string dentro uno script).
 - ...Tuttavia è permesso l'uso di tag HTML top-level, anche quelli che non avrebbero alcun senso se privi del loro appropriato contenitore (per esempio i `<tr>`).