Skip to content

Commit 661da22

Browse files
alcune correzioni
1 parent b17c9d3 commit 661da22

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

8-web-components/5-slots-composition/article.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Shadow DOM slots, composition
22

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.
44

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ù.
66

77
Il codice che fa uso del `<custom-menu>` potrebbe essere questo:
88

@@ -15,11 +15,11 @@ Il codice che fa uso del `<custom-menu>` potrebbe essere questo:
1515
</custom-menu>
1616
```
1717

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...
1919

2020
Come si può implementare?
2121

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.
2323

2424
Fortunatamente, non è necessario. Lo Shadow DOM supporta gli elementi `<slot>`, che vengono automaticamente riempiti dal contenuto del light DOM.
2525

@@ -56,9 +56,9 @@ customElements.define('user-card', class extends HTMLElement {
5656
</user-card>
5757
```
5858

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"`.
6060

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.
6262

6363
Ecco come sarà la struttura dopo lo script, senza il coinvolgimento della composition:
6464

@@ -76,13 +76,13 @@ Ecco come sarà la struttura dopo lo script, senza il coinvolgimento della compo
7676
</user-card>
7777
```
7878

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.
8080

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:
8282

8383
![](shadow-dom-user-card.svg)
8484

85-
Il risultato viene soprannominato "flattened" DOM:
85+
Il risultato viene detto "flattened" DOM:
8686

8787
```html
8888
<user-card>

0 commit comments

Comments
 (0)