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/5-slots-composition/article.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
# Shadow DOM slots, composition
2
2
3
-
Molti tipi di components, come tabs, menù, gallerie di immagini e così via, necessitano di contenuti da visualizzare.
3
+
Molti tipi di components, come tabs, menù, gallerie di immagini ed altri ancora, necessitano di contenuti da visualizzare.
4
4
5
-
Proprio come gli elementi built-in del browser, dove `<select>` si aspetta degli elementi `<option>`, i nostri `<custom-tabs>` potrebbero aspettarsi che gli venga passato l'attuale contenuto del tab. Ed un `<custom-menu>`, ad esempio, si aspetterebbe degli elemetni del menù.
5
+
Proprio come gli elementi built-in del browser, in cui `<select>` si aspetta gli elementi `<option>`, i nostri `<custom-tabs>` potrebbero avere la necessità che gli venga passato il contenuto attuale del tab. Oppure un `<custom-menu>`, ad esempio, si aspetterebbe gli elementi del menù.
6
6
7
7
Il codice che fa uso del `<custom-menu>` potrebbe essere questo:
8
8
@@ -15,11 +15,11 @@ Il codice che fa uso del `<custom-menu>` potrebbe essere questo:
15
15
</custom-menu>
16
16
```
17
17
18
-
...Quindi il nostro "component" dovrebbe visualizzarsi correttamente, come un menù con titolo e relativi elementi, gestione degli eventi e tutto il resto...
18
+
...Il nostro "component" potrebbe visualizzarsi correttamente in questo modo, come un menù con titolo ed i suoi elementi, la gestione degli eventi e tutto il resto...
19
19
20
20
Come si può implementare?
21
21
22
-
Possiamo provare ad analizzare il contenuto dell'elemento, e copiare e poi riarrangiare dinamicamente i nodi DOM. Ciò è sicuramente fattibile, ma se stiamo spostando gli elementi nello shadow DOM, e quindi gli stili CSS del documento non verranno applicati in quella sezione, potremmo perdere lo stile visuale. Ed anche questo richiederebbe un po' di gestione lato codice.
22
+
Possiamo provare ad analizzare il contenuto dell'elemento, e poi copiare e riarrangiare dinamicamente i nodi DOM. Ciò è sicuramente fattibile, ma se stiamo spostando gli elementi nello shadow DOM, e quindi gli stili CSS del documento non verranno applicati in quella sezione, potremmo incorrere in difetti di visualizzazione degli stili, cosa che richiederebbe un po' di gestione lato codice.
23
23
24
24
Fortunatamente, non è necessario. Lo Shadow DOM supporta gli elementi `<slot>`, che vengono automaticamente riempiti dal contenuto del light DOM.
25
25
@@ -56,9 +56,9 @@ customElements.define('user-card', class extends HTMLElement {
56
56
</user-card>
57
57
```
58
58
59
-
Nello shadow DOM, `<slot name="X">` definisce un "punto di inserimento", un posto dove vengono visualizzati gli elementi con `slot="X"`.
59
+
Nello shadow DOM, `<slot name="X">` definisce un "punto di inserimento", cioè una posizione all'interno della quale vengono visualizzati gli elementi con `slot="X"`.
60
60
61
-
Quindi il browser esegue la "composizione": prende gli elementi dal light DOM e ne esegue il rendering negli slots corrispondenti dello shadow DOM. Quindi alla fine, avremo esattamente quello che vogliamo: un componente che può essere riempito con dei dati.
61
+
Quindi, il browser esegue la "composition": prende gli elementi dal light DOM e ne esegue il rendering all'interno degli slots corrispondenti dello shadow DOM. Ed alla fine del processo, avremo esattamente quello che vogliamo: un componente che può essere riempito con dei dati.
62
62
63
63
Ecco come sarà la struttura dopo lo script, senza il coinvolgimento della composition:
64
64
@@ -76,13 +76,13 @@ Ecco come sarà la struttura dopo lo script, senza il coinvolgimento della compo
76
76
</user-card>
77
77
```
78
78
79
-
Abbiamo creato lo shadow DOM, quindi eccolo, dentro `#shadow-root`. Ora ha sia lo shadow che il light DOM.
79
+
Abbiamo creato lo shadow DOM, ed eccolo dentro `#shadow-root`. Ora contiene sia lo shadow che il light DOM.
80
80
81
-
Per esigenze di rendering, per ogni `<slot name="...">` dello shadow DOM, il browser cerca uno `slot="..."` con lo stesso nome all'interno del light DOM. Questi elementi vengono renderizzati dentro gli slots:
81
+
Per esigenze di rendering, per ogni `<slot name="...">` dello shadow DOM, il browser cerca uno `slot="..."` con lo stesso nome, all'interno del light DOM. Questi elementi vengono renderizzati dentro gli slots:
82
82
83
83

84
84
85
-
Il risultato viene soprannominato "flattened" DOM:
0 commit comments