From 48c3bc4be50e27c6604b3ebb5791495c26a283be Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Sat, 27 Mar 2021 11:06:01 +0100 Subject: [PATCH 01/14] prime modifiche --- 8-web-components/2-custom-elements/article.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md index 13af80b8c..9fd2187dd 100644 --- a/8-web-components/2-custom-elements/article.md +++ b/8-web-components/2-custom-elements/article.md @@ -1,32 +1,32 @@ # Custom elements -We can create custom HTML elements, described by our class, with its own methods and properties, events and so on. +Possiamo creare custom elements HTML, descritti tramite delle classi proprietarie, con i propri metodi, proprietà, eventi e così via. -Once a custom element is defined, we can use it on par with built-in HTML elements. +Una volta definito un elemento custom, possiamo usarlo al pari qualunque altro elemento HTML built-in. -That's great, as HTML dictionary is rich, but not infinite. There are no ``, ``, ``... Just think of any other tag we might need. +Ciò è grandioso, dato che il dizionario HTML è molto ricco, ma non infinito. Non ci sono ``, ``, ``... Basti pensare a qualunque altro tag di cui abbiamo necessità. -We can define them with a special class, and then use as if they were always a part of HTML. +Possiamo definirli con classi speciali, ed usarli come se fossero sempre stati parte dell'HTML. -There are two kinds of custom elements: +I custom elements si dividono in due tipologie: -1. **Autonomous custom elements** -- "all-new" elements, extending the abstract `HTMLElement` class. -2. **Customized built-in elements** -- extending built-in elements, like a customized button, based on `HTMLButtonElement` etc. +1. **Custom elements autonomi** -- elementi "nuovi di zecca", che estendono la casse astratta `HTMLElement`. +2. **Customized built-in elements** -- che estendono gli elementi built-in, come ad esmepio un pulsante personalizzato, basato su `HTMLButtonElement` etc. -First we'll cover autonomous elements, and then move to customized built-in ones. +Per primo, affrontiamo gli elementi autonomi, dopodiché ci sposteremo su quelli built-in personalizzati. -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. +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. -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. +Ciò viene fatto creando una classe con metodi speciali. È facile, dato che ci sono pochi metodi e sono tutti opzionali. -Here's a sketch with the full list: +Ecco una classe scheletro, con la lista completa: ```js class MyElement extends HTMLElement { constructor() { super(); - // element created + // elemento creato } connectedCallback() { From c0aa048c08ac3e5f0e5132d8e62fe446739f8623 Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Sat, 27 Mar 2021 13:23:15 +0100 Subject: [PATCH 02/14] modifiche --- 8-web-components/2-custom-elements/article.md | 71 +++++++++---------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md index 9fd2187dd..cacd7f8d9 100644 --- a/8-web-components/2-custom-elements/article.md +++ b/8-web-components/2-custom-elements/article.md @@ -1,26 +1,26 @@ -# Custom elements +# Elementi personalizzati -Possiamo creare custom elements HTML, descritti tramite delle classi proprietarie, con i propri metodi, proprietà, eventi e così via. +Possiamo creare elementi HTML personalizzati, descritti tramite delle apposite classi, con metodi propri metodi, proprietà, eventi e così via. -Una volta definito un elemento custom, possiamo usarlo al pari qualunque altro elemento HTML built-in. +Una volta definito un elemento personalizzato, possiamo usarlo al pari qualunque altro elemento HTML built-in. Ciò è grandioso, dato che il dizionario HTML è molto ricco, ma non infinito. Non ci sono ``, ``, ``... Basti pensare a qualunque altro tag di cui abbiamo necessità. Possiamo definirli con classi speciali, ed usarli come se fossero sempre stati parte dell'HTML. -I custom elements si dividono in due tipologie: +Gli elementi personalizzati si dividono in due categorie: 1. **Custom elements autonomi** -- elementi "nuovi di zecca", che estendono la casse astratta `HTMLElement`. -2. **Customized built-in elements** -- che estendono gli elementi built-in, come ad esmepio un pulsante personalizzato, basato su `HTMLButtonElement` etc. +2. **Customized built-in elements** -- che estendono gli elementi built-in, ad esempio un pulsante personalizzato, basato su `HTMLButtonElement` etc. Per primo, affrontiamo gli elementi autonomi, dopodiché ci sposteremo su quelli built-in personalizzati. -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. +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'elemento venga aggiunto o rimosso dalla pagina, etc. Ciò viene fatto creando una classe con metodi speciali. È facile, dato che ci sono pochi metodi e sono tutti opzionali. -Ecco una classe scheletro, con la lista completa: +Ecco uno scheletro per la classe, con la lista completa: ```js class MyElement extends HTMLElement { @@ -30,52 +30,52 @@ class MyElement extends HTMLElement { } connectedCallback() { - // browser calls this method when the element is added to the document - // (can be called many times if an element is repeatedly added/removed) + // il browser chiama questo metodo quando l'elemento viene aggiunto al documento + // (può essere chiamato tante volte se un elemento viene raggiunto o rimosso) } disconnectedCallback() { - // browser calls this method when the element is removed from the document - // (can be called many times if an element is repeatedly added/removed) + // il browser chiama questo metodo quando l'elemento viene rimosso dal documento + // (può essere chiamato tante volte se un elemento viene aggiunto o rimosso) } static get observedAttributes() { - return [/* array of attribute names to monitor for changes */]; + return [/* un array di nomi di attributi per monitorare le modifiche */]; } attributeChangedCallback(name, oldValue, newValue) { - // called when one of attributes listed above is modified + // chiamato quadno uno degli attributi della lista precendente viene modificato } adoptedCallback() { - // called when the element is moved to a new document - // (happens in document.adoptNode, very rarely used) + // chiamato quando l'elemento viene spostato su un nuovo documento + // (avviene in document.adoptNode, usato molto raramente) } - // there can be other element methods and properties + // possono esserci altri metodi e proprietà per l'elemento } ``` -After that, we need to register the element: +Dopodiché, possiamo registrare l'elemento: ```js -// let the browser know that is served by our new class +// fa in modo che il browser sappia che venga fornito dalla nostra classe customElements.define("my-element", MyElement); ``` -Now for any HTML elements with tag ``, an instance of `MyElement` is created, and the aforementioned methods are called. We also can `document.createElement('my-element')` in JavaScript. +Adesso, per ogni elemento HTML con tag ``, verrà creata un'istanza di `MyElement`, e chiamati i sopracitati metodi. Possiamo anche chiamare `document.createElement('my-element')` in JavaScript. -```smart header="Custom element name must contain a hyphen `-`" -Custom element name must have a hyphen `-`, e.g. `my-element` and `super-button` are valid names, but `myelement` is not. +```smart header="Il nome degli elementi custom devono contenere un trattino `-`" +I nomi degli elementi personalizzati devono contenere un trattino `-`, ad esempio `my-element` e `super-button` sono nomi validi, al contrario di `myelement`. -That's to ensure that there are no name conflicts between built-in and custom HTML elements. +Ciò ci assicura l'assenza di conflitti tra i nostri elementi HTML personalizzati e quelli built-in. ``` -## Example: "time-formatted" +## Esempio: "time-formatted" -For example, there already exists `