|
1 | 1 |
|
2 | 2 | # Custom elements |
3 | 3 |
|
4 | | -We can create custom HTML elements, described by our class, with its own methods and properties, events and so on. |
| 4 | +Possiamo creare custom elements HTML, descritti tramite delle classi proprietarie, con i propri metodi, proprietà, eventi e così via. |
5 | 5 |
|
6 | | -Once a custom element is defined, we can use it on par with built-in HTML elements. |
| 6 | +Una volta definito un elemento custom, possiamo usarlo al pari qualunque altro elemento HTML built-in. |
7 | 7 |
|
8 | | -That's great, as HTML dictionary is rich, but not infinite. There are no `<easy-tabs>`, `<sliding-carousel>`, `<beautiful-upload>`... Just think of any other tag we might need. |
| 8 | +Ciò è grandioso, dato che il dizionario HTML è molto ricco, ma non infinito. Non ci sono `<easy-tabs>`, `<sliding-carousel>`, `<beautiful-upload>`... Basti pensare a qualunque altro tag di cui abbiamo necessità. |
9 | 9 |
|
10 | | -We can define them with a special class, and then use as if they were always a part of HTML. |
| 10 | +Possiamo definirli con classi speciali, ed usarli come se fossero sempre stati parte dell'HTML. |
11 | 11 |
|
12 | | -There are two kinds of custom elements: |
| 12 | +I custom elements si dividono in due tipologie: |
13 | 13 |
|
14 | | -1. **Autonomous custom elements** -- "all-new" elements, extending the abstract `HTMLElement` class. |
15 | | -2. **Customized built-in elements** -- extending built-in elements, like a customized button, based on `HTMLButtonElement` etc. |
| 14 | +1. **Custom elements autonomi** -- elementi "nuovi di zecca", che estendono la casse astratta `HTMLElement`. |
| 15 | +2. **Customized built-in elements** -- che estendono gli elementi built-in, come ad esmepio un pulsante personalizzato, basato su `HTMLButtonElement` etc. |
16 | 16 |
|
17 | | -First we'll cover autonomous elements, and then move to customized built-in ones. |
| 17 | +Per primo, affrontiamo gli elementi autonomi, dopodiché ci sposteremo su quelli built-in personalizzati. |
18 | 18 |
|
19 | | -To create a custom element, we need to tell the browser several details about it: how to show it, what to do when the element is added or removed to page, etc. |
| 19 | +Per creare un elemento personalizzato, abbiamo bisogno di comunicare al browser una serie di dettagli su di esso: come mostrarlo, cosa fare una volta che l'emento venga aggiunto o rimosso dalla pagina, etc. |
20 | 20 |
|
21 | | -That's done by making a class with special methods. That's easy, as there are only few methods, and all of them are optional. |
| 21 | +Ciò viene fatto creando una classe con metodi speciali. È facile, dato che ci sono pochi metodi e sono tutti opzionali. |
22 | 22 |
|
23 | | -Here's a sketch with the full list: |
| 23 | +Ecco una classe scheletro, con la lista completa: |
24 | 24 |
|
25 | 25 | ```js |
26 | 26 | class MyElement extends HTMLElement { |
27 | 27 | constructor() { |
28 | 28 | super(); |
29 | | - // element created |
| 29 | + // elemento creato |
30 | 30 | } |
31 | 31 |
|
32 | 32 | connectedCallback() { |
|
0 commit comments