I componenti web stanno guadagnando il supporto su più browser, la community sta crescendo a dismisura e c'è un nuovissimo catalogo di componenti web per trovare esattamente il componente di cui hai bisogno.
Hai mai desiderato creare il tuo componente JavaScript autonomo, che puoi utilizzare facilmente in più progetti o condividere con altri sviluppatori, indipendentemente dal framework JavaScript utilizzato? I componenti web potrebbero fare al caso tuo.
I componenti web sono un insieme di nuove funzionalità della piattaforma web che ti consentono di creare i tuoi elementi HTML. Ogni nuovo elemento personalizzato può avere un tag personalizzato come
<my-button> e disporre di tutte le funzionalità degli elementi integrati: gli elementi personalizzati
possono avere proprietà e metodi, attivare e rispondere agli eventi e persino avere un
stile e alberi DOM incapsulati per avere un proprio aspetto.
Fornendo un modello di componenti a basso livello basato sulla piattaforma, i componenti web ti consentono di creare e condividere elementi riutilizzabili per qualsiasi cosa, dai pulsanti specializzati alle visualizzazioni complesse come i selettori di date. Poiché i componenti web sono realizzati con API di piattaforma che includono potenti primitive di incapsulamento, puoi persino utilizzarli all'interno di altre librerie o framework JavaScript come se fossero elementi DOM standard.
Potresti aver già sentito parlare di Web Components: una versione precedente della specifica Web Components (v0) è stata implementata in Chrome 33.
Oggi, grazie a un'ampia collaborazione tra i fornitori di browser, la v1, la versione di nuova generazione delle specifiche dei componenti web, sta guadagnando un ampio supporto. Chrome supporta le due specifiche principali che compongono i componenti web, ovvero DOM ombra ed Elementi personalizzati, rispettivamente a partire da Chrome 53 e Chrome 54. Safari ha supportato Shadow DOM 1.0 in Safari 10 e ha completato l'implementazione di Elementi personalizzati 1.0 in WebKit. Firefox è attualmente in fase di sviluppo di Shadow DOM e Elementi personalizzati 1.0 e sia Shadow DOM che Elementi personalizzati sono nella roadmap di Edge.
Per definire un nuovo elemento personalizzato utilizzando l'implementazione della versione 1, devi semplicemente creare una nuova classe che estenda HTMLElement utilizzando la sintassi ES6 e registrarla nel browser:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Le nuove specifiche v1 sono estremamente potenti. Abbiamo raccolto tutorial sull'utilizzo di Custom Elements v1 e Shadow DOM v1 per aiutarti a iniziare.
webcomponents.org
Anche la community dei componenti web è in rapida crescita. Siamo entusiasti di annunciare il lancio di un sito aggiornato di webcomponents.org, il punto di riferimento della community dei componenti web, che include un catalogo integrato per consentire agli sviluppatori di condividere i propri elementi.
Il sito webcomponents.org contiene informazioni sulle specs dei componenti web, aggiornamenti e contenuti della community dei componenti web e mostra la documentazione per gli elementi open source e le raccolte di elementi creati da altri sviluppatori.
Puoi iniziare a creare il tuo primo elemento utilizzando una libreria come Polymer di Google oppure utilizzare direttamente le API Web Component di basso livello. Quindi, pubblica il tuo elemento su webcomponents.org.
Buona composizione!