You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 8-web-components/4-template-element/article.md
+13-15Lines changed: 13 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
2
2
# Elemento Template
3
3
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.
5
5
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>`?
7
7
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.
9
9
10
10
Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
11
11
```html
@@ -16,9 +16,9 @@ Per esempio, possiamo possiamo inserire una riga di una tabella `<tr>`:
16
16
</template>
17
17
```
18
18
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.
20
20
21
-
Possiamo anche inserire stili e scripts dentro i `<template>`:
21
+
Dentro i tag `<template>` possiamo anche inserire stili e scripts:
22
22
23
23
```html
24
24
<template>
@@ -31,15 +31,15 @@ Possiamo anche inserire stili e scripts dentro i `<template>`:
31
31
</template>
32
32
```
33
33
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.
35
35
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.
37
37
38
38
## Inserimento del template
39
39
40
40
Il contenuto del template è disponibile nella proprietà `content` come [DocumentFragment](info:modifying-document#document-fragment), un particolare tipo di nodo DOM.
41
41
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.
43
43
44
44
Per esempio:
45
45
@@ -55,7 +55,7 @@ Per esempio:
55
55
let elem =document.createElement('div');
56
56
57
57
*!*
58
-
// Clona il contenuto del template per riutilizzarlo più volte
58
+
// Clona il contenuto del template per riutilizzarlo piu' volte
59
59
elem.append(tmpl.content.cloneNode(true));
60
60
*/!*
61
61
@@ -101,16 +101,14 @@ Questi formano lo shadow DOM:
101
101
102
102
## Riepilogo
103
103
104
-
Per riepilogare:
105
-
106
104
- 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.
109
107
110
-
Il tag `<template>`è unico, perché:
108
+
Il tag `<template>`ha delle pecurialità uniche, in quanto:
111
109
112
110
- Il browser controlla la sintassi HTML al suo interno (diversamente dall'uso di un template string dentro uno script).
113
111
- ...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>`).
114
112
- Il contenuto diventa interattivo (gli scripts vengono eseguiti, i `<video autoplay>` partono, etc) quando viene inserito dentro il documento.
115
113
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