Skip to content

Commit f766297

Browse files
correzioni
1 parent ef5e2dd commit f766297

File tree

1 file changed

+13
-15
lines changed

1 file changed

+13
-15
lines changed

8-web-components/4-template-element/article.md

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11

22
# Elemento Template
33

4-
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.
4+
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.
55

6-
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>`?
6+
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>`?
77

8-
Prima di tutto il contenuto può essere un qaualunque tipo di HTML valido, anche se, normalmente richiede un tag di inclusione appropriato.
8+
Prima di tutto il contenuto può essere qualunque HTML valido, anche se, normalmente richiede un tag di inclusione appropriato.
99

1010
Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
1111
```html
@@ -16,9 +16,9 @@ Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
1616
</template>
1717
```
1818

19-
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.
19+
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.
2020

21-
Possiamo anche inserire stili e scripts dentro i `<template>`:
21+
Dentro i tag `<template>` possiamo anche inserire stili e scripts:
2222

2323
```html
2424
<template>
@@ -31,15 +31,15 @@ Possiamo anche inserire stili e scripts dentro i `<template>`:
3131
</template>
3232
```
3333

34-
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.
34+
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.
3535

36-
Il contenuto diventa vivo (gli stili vengono applicati, gli script vengono eseguiti, etc) solo quando andiamo ad inserirlo dentro il documento.
36+
Il contenuto prende vita (gli stili vengono applicati, gli script vengono eseguiti, etc) solo quando viene inseririto dentro il documento.
3737

3838
## Inserimento del template
3939

4040
Il contenuto del template è disponibile nella proprietà `content` come [DocumentFragment](info:modifying-document#document-fragment), un particolare tipo di nodo DOM.
4141

42-
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.
42+
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.
4343

4444
Per esempio:
4545

@@ -55,7 +55,7 @@ Per esempio:
5555
let elem = document.createElement('div');
5656
5757
*!*
58-
// Clona il contenuto del template per riutilizzarlo più volte
58+
// Clona il contenuto del template per riutilizzarlo piu' volte
5959
elem.append(tmpl.content.cloneNode(true));
6060
*/!*
6161
@@ -101,16 +101,14 @@ Questi formano lo shadow DOM:
101101

102102
## Riepilogo
103103

104-
Per riepilogare:
105-
106104
- il contenuto di `<template>` può essere qualunque HTML sintatticamente corretto.
107-
- i contenuto di `<template>` viene considerato "avulso dal documento", quindi non modificherà o eseguirà alcunché.
108-
- Possiamo accedere a `template.content` via JavaScript, clonarlo per poterlo riutilizzare in un nuovo componente.
105+
- il contenuto di `<template>` essendo considerato "avulso dal documento", non modificherà, nè eseguirà alcunché al suo interno.
106+
- Possiamo accedere a `template.content` via JavaScript, ed anche clonarlo per poterlo riutilizzare in un nuovo componente.
109107

110-
Il tag `<template>` è unico, perché:
108+
Il tag `<template>` ha delle pecurialità uniche, in quanto:
111109

112110
- Il browser controlla la sintassi HTML al suo interno (diversamente dall'uso di un template string dentro uno script).
113111
- ...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>`).
114112
- Il contenuto diventa interattivo (gli scripts vengono eseguiti, i `<video autoplay>` partono, etc) quando viene inserito dentro il documento.
115113

116-
L'elemento `<template>` non comprende alcun tipo di meccanismo di interazione, data binding o sostituzioni di variabili, ma possiamo implementarli su di essi.
114+
L'elemento `<template>` non comprende alcun tipo di meccanismo di interazione, data binding o sostituzioni di variabili, ma possiamo implementarli.

0 commit comments

Comments
 (0)