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
Shadow DOM serves for encapsulation. It allows a component to have its very own "shadow" DOM tree, that can't be accidentally accessed from the main document, may have local style rules, and more.
3
+
Lo Shadow DOM serve all'incapsulamento e permette al componente di avere il proprio DOM "shadow", al quale il documento principale non può accedere nemmeno accidentalmente. Inoltre può avere regole di stile con scope locale e molto altro ancora.
4
4
5
-
## Built-in shadow DOM
5
+
## Shadow DOM built-in
6
6
7
-
Did you ever think how complex browser controls are created and styled?
7
+
Avete mai pensato a come, dei controlli così complessi come quelli del browser, vengono creati e stilizzati?
8
8
9
-
Such as `<input type="range">`:
9
+
Prendiamo `<input type="range">` come esempio:
10
10
11
11
<p>
12
12
<inputtype="range">
13
13
</p>
14
14
15
-
The browser uses DOM/CSS internally to draw them. That DOM structure is normally hidden from us, but we can see it in developer tools. E.g. in Chrome, we need to enable in Dev Tools "Show user agent shadow DOM" option.
15
+
Il browser usa la combinazione DOM e CSS internamente, per visualizzarli a schermo. Normalmente la struttura del DOM ci è invisibile, ma possiamo visualizzarla negli strumenti dello sviluppatore dei browser. Ad esempio, negli strumenti di sviluppo di Chrome, si può attivarne la visualizzazione nelle impostazioni generiche, l'opzione "Show user agent shadow DOM".
16
16
17
-
Then `<input type="range">`looks like this:
17
+
Così facendo `<input type="range">`verrà mostrato in questo modo:
18
18
19
19
20
20
21
-
What you see under `#shadow-root`is called "shadow DOM".
21
+
Quello che vediamo alla voce `#shadow-root`viene chiamato "Shadow DOM".
22
22
23
-
We can't get built-in shadow DOM elements by regular JavaScript calls or selectors. These are not regular children, but a powerful encapsulation technique.
23
+
Non possiamo lavorare sugli elementi built-in dello Shadow DOM tramite normale chiamate o selettori CSS. Non sono nodi figli normali, ma una potente tecnica di incapsulamento.
24
24
25
-
In the example above, we can see a useful attribute `pseudo`. It's non-standard, exists for historical reasons. We can use it style subelements with CSS, like this:
25
+
Nell'esempio precedente, possiamo notare l'attributo `pseudo` che è molto utile. Non è un attributo standard, esiste per ragioni storiche e possiamo usarlo per stilizzare i sottoelementi tramite CSS, in questo modo:
Once again, `pseudo`is a non-standard attribute. Chronologically, browsers first started to experiment with internal DOM structures to implement controls, and then, after time, shadow DOM was standardized to allow us, developers, to do the similar thing.
38
+
Ripetiamolo ancora una volta, `pseudo`non è un attributo standard. Storicamente, i browser hanno cominciato a sperimentare con le strutture interne del DOM per implementare dei controlli, e con il passare del tempo, lo Shadow DOM è stato standardizzato per permettere a noi sviluppatori, di fare alla stessa maniera.
39
39
40
-
Further on, we'll use the modern shadow DOM standard, covered by [DOM spec](https://dom.spec.whatwg.org/#shadow-trees)and other related specifications.
40
+
Più avanti, utilizzeremo lo standard Shadow DOM moderno, nella sezione delle [specifiche DOM](https://dom.spec.whatwg.org/#shadow-trees)ed altre specifiche correlate.
41
41
42
42
## Shadow tree
43
43
44
-
A DOM element can have two types of DOM subtrees:
44
+
Un elemento DOM può contenere due tipi di sottoalberi:
45
45
46
-
1. Light tree -- a regular DOM subtree, made of HTML children. All subtrees that we've seen in previous chapters were "light".
47
-
2. Shadow tree -- a hidden DOM subtree, not reflected in HTML, hidden from prying eyes.
46
+
1. Light tree -- un normale sottoalbero DOM, fatto di figli HTML. Tutti i sottoalberi affrontati nei capitoli precedenti appartengono a questa categoria "light".
47
+
2. Shadow tree -- un sottoalbero DOM nascosto, senza un elemento corrispondente nell'HTML, nascosto da "occhi indiscreti".
48
48
49
-
If an element has both, then the browser renders only the shadow tree. But we can setup a kind of composition between shadow and light trees as well. We'll see the details later in the chapter<info:slots-composition>.
49
+
Se un elemento li ha entrambi, il browser renderizza solo lo Shadow tree. Tuttavia possiamo impostare una sorta di composizione tra gli il light e lo Shadow tree. Vedremo in dettaglio l'argomento nell'apposita sezione<info:slots-composition>.
50
50
51
-
Shadow tree can be used in Custom Elements to hide component internals and apply component-local styles.
51
+
Lo Shadow tree può essere usato all'interno dei Custom Elements per nascondere i componenti interni ed applicare gli stili localmente all'interno componente.
52
52
53
-
For example, this `<show-hello>`element hides its internal DOM in shadow tree:
53
+
Per esempio, questo elemento, `<show-hello>`nasconde il suo DOM interno dell' Shadow tree:
54
54
55
55
```html run autorun height=60
56
56
<script>
@@ -67,46 +67,46 @@ customElements.define('show-hello', class extends HTMLElement {
67
67
<show-helloname="John"></show-hello>
68
68
```
69
69
70
-
That's how the resulting DOM looks in Chrome dev tools, all the content is under "#shadow-root":
70
+
Ecco come risulta il DOM, negli strumenti di sviluppo di Chrome, con il contenuto inserito in "#shadow-root":
71
71
72
72
73
73
74
-
First, the call to`elem.attachShadow({mode: …})`creates a shadow tree.
74
+
Inizialmente, la chiamata a`elem.attachShadow({mode: …})`crea uno Shadow tree.
75
75
76
-
There are two limitations:
77
-
1.We can create only one shadow root per element.
78
-
2.The`elem`must be either a custom element, or one of: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", or "span". Other elements, like `<img>`, can't host shadow tree.
76
+
Ci sono due limitazioni:
77
+
1.Possiamo creare solo una Shadow root per ogni elemento.
78
+
2.L'elemento`elem`deve essere, o un elemento personalizzato, o uno tra questi elementi: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", o "span". Altri elementi, come ad esempio, `<img>`, non possono contenere uno Shadow tree.
79
79
80
-
The`mode`option sets the encapsulation level. It must have any of two values:
81
-
-`"open"` -- the shadow root is available as`elem.shadowRoot`.
80
+
L'opzione`mode`imposta il livello di incapsulamento. Le opzioni possibili sono:
81
+
-`"open"` -- la Shadow root è disponibile tramite`elem.shadowRoot`.
82
82
83
-
Any code is able to access the shadow tree of `elem`.
84
-
-`"closed"` -- `elem.shadowRoot`is always`null`.
83
+
Lo Shadow tree di `elem` è accessibile da qualunque punto del codice.
84
+
-`"closed"` -- `elem.shadowRoot`è sempre`null`.
85
85
86
-
We can only access the shadow DOM by the reference returned by `attachShadow` (and probably hidden inside a class). Browser-native shadow trees, such as `<input type="range">`, are closed. There's no way to access them.
86
+
Lo Shadow DOM è accessibile esclusivamente dal riferimento restituito da `attachShadow` (il quale, con ogni probabilità, sarà nascosto dentro una classe. Shadow tree nativi del browser, come`<input type="range">`, appartengono a questa categoria, e non c'è modo di accedervi.
87
87
88
-
The [shadow root](https://dom.spec.whatwg.org/#shadowroot), returned by`attachShadow`, is like an element: we can use `innerHTML`or DOM methods, such as `append`, to populate it.
88
+
La [Shadow root](https://dom.spec.whatwg.org/#shadowroot), restituita con`attachShadow`, è come un elemento: possiamo usare `innerHTML`o i metodi DOM, come `append`, per popolarlo di elementi.
89
89
90
-
The element with a shadow root is called a "shadow tree host", and is available as the shadow root `host`property:
90
+
L'elemento con una Shadow root viene invece chiamato "Shadow tree host", ed è disponibile attraverso la proprietà `host`della Shadow root:
91
91
92
92
```js
93
-
//assuming {mode: "open"}, otherwise elem.shadowRoot is null
93
+
//supponiamo di avere {mode: "open"}, altrimenti elem.shadowRoot sarebbe null
94
94
alert(elem.shadowRoot.host=== elem); // true
95
95
```
96
96
97
-
## Encapsulation
97
+
## Incapsulamento
98
98
99
-
Shadow DOM is strongly delimited from the main document:
99
+
Vi è una separazione marcata tra lo Shadow DOM ed il documento principale:
100
100
101
-
1. Shadow DOM elements are not visible to `querySelector`from the light DOM. In particular, Shadow DOM elements may have ids that conflict with those in the light DOM. They must be unique only within the shadow tree.
102
-
2. Shadow DOM has own stylesheets. Style rules from the outer DOM don't get applied.
101
+
1.Gli elementi dello Shadow DOM non sono rilevabili tramite `querySelector`del light DOM. In particolare, gli id degli elementi dello Shadow DOM, potrebbero andare in conflitto con quelli dell'albero del light DOM.
102
+
2.Lo Shadow DOM ha i suoi fogli di stile e le regole di stile del DOM esterno non vengono applicate.
103
103
104
-
For example:
104
+
Per esempio:
105
105
106
106
```html run untrusted height=40
107
107
<style>
108
108
*!*
109
-
/*document style won't apply to the shadow tree inside #elem (1) */
109
+
/*lo stile del documento non viene applicato allo Shadow tree contenuto in #elem (1) */
110
110
*/!*
111
111
p { color: red; }
112
112
</style>
@@ -116,42 +116,42 @@ For example:
116
116
<script>
117
117
elem.attachShadow({mode:'open'});
118
118
*!*
119
-
//shadow tree has its own style (2)
119
+
//Lo Shadow tree possiede un proprio stile (2)
120
120
*/!*
121
121
elem.shadowRoot.innerHTML=`
122
122
<style>p { font-weight: bold; } </style>
123
123
<p>Hello, John!</p>
124
124
`;
125
125
126
126
*!*
127
-
// <p> is only visible from queries inside the shadow tree (3)
127
+
// <p> e' visibile solamente da queries dentro lo Shadow tree (3)
- Shadow DOM is mentioned in many other specifications, e.g. [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin)specifies that shadow root has`innerHTML`.
-Lo Shadow DOM viene menzionato in molte altre specifiche, ad esempio in [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin)specifica che la Shadow root possiede la proprietà`innerHTML`.
143
143
144
144
145
-
## Summary
145
+
## Riepilogo
146
146
147
-
Shadow DOM is a way to create a component-local DOM.
147
+
Lo "Shadow DOM" è una modalità di creazione di un componente DOM locale.
148
148
149
-
1.`shadowRoot = elem.attachShadow({mode: open|closed})`-- creates shadow DOM for`elem`. If`mode="open"`, then it's accessible as `elem.shadowRoot` property.
150
-
2.We can populate `shadowRoot`using`innerHTML`or other DOM methods.
149
+
1.Il comando `shadowRoot = elem.attachShadow({mode: open|closed})`crea uno Shadow DOM per`elem`. Se`mode="open"`, allora sarà possibile accedervi attraverso la proprietà `elem.shadowRoot`.
150
+
2.Possiamo popolare `shadowRoot`usando`innerHTML`o altri metodi DOM.
151
151
152
-
Shadow DOM elements:
153
-
-Have their own ids space,
154
-
-Invisible to JavaScript selectors from the main document, such as `querySelector`,
155
-
-Use styles only from the shadow tree, not from the main document.
152
+
Gli elementi dello Shadow DOM:
153
+
-Hanno la loro area per gli id
154
+
-Sono invisibili ai selettori JavaScript dal documento principale, se cercati con `querySelector`
155
+
-Usano gli stili dello Shadow tree, e non quelli del documento principale.
156
156
157
-
Shadow DOM, if exists, is rendered by the browser instead of so-called "light DOM" (regular children). In the chapter <info:slots-composition>we'll see how to compose them.
157
+
Lo Shadow DOM, se esiste, viene renderizzato dal browser al posto del cosiddetto "light DOM" (normali nodi figli). Nel capitolo <info:slots-composition>vedremo come comporli.
0 commit comments