I componenti web stanno ottenendo il supporto di più browser, la community sta crescendo a passi da gigante e c'è un nuovissimo catalogo di componenti web in cui trovare esattamente il componente di cui hai bisogno.
Hai mai desiderato di creare un componente JavaScript autonomo da utilizzare facilmente su più progetti o da condividere con altri sviluppatori a prescindere 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 personalizzati. Ogni nuovo elemento personalizzato può avere un tag personalizzato, ad esempio <my-button>, e avere tutta la qualità degli elementi integrati. Gli elementi personalizzati possono avere proprietà e metodi, attivarsi e rispondere agli eventi e persino avere uno stile incapsulato e alberi DOM per conferire un aspetto diverso.
Fornendo un modello di componenti di basso livello basato sulla piattaforma, Web Componenti ti consente di creare e condividere elementi riutilizzabili per qualsiasi cosa, dai pulsanti specializzati alle viste complesse come i selettori della data. Poiché i componenti web sono sviluppati con le API delle piattaforme che includono potenti primitive di incapsulamento, puoi persino utilizzare questi componenti all'interno di altre librerie o framework JavaScript come se fossero elementi DOM standard.
Probabilmente hai già sentito parlare di Web Componenti; una versione in anteprima della specifica Web components v0 era spedibile in Chrome 33.
Oggi, grazie a un'ampia collaborazione tra i fornitori di browser, la nuova generazione della specifica Web Componenti v1 sta guadagnando un ampio supporto. Chrome supporta le due specifiche principali che compongono i componenti web, Shadow DOM e Custom Elements, rispettivamente a partire da Chrome 53 e da Chrome 54. Safari ha fornito il supporto per Shadow DOM v1 in Safari 10 e ha completato l'implementazione di Custom Elements v1 in WebKit. Firefox sta attualmente sviluppando Shadow DOM e Custom Elements v1, ed sia Shadow DOM che Custom Elements sono in programma per Edge.
Per definire un nuovo elemento personalizzato utilizzando l'implementazione v1, è sufficiente creare una nuova classe che estenda HTMLElement utilizzando la sintassi ES6 e registrarla con il browser:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Le nuove specifiche v1 sono estremamente potenti: per aiutarti a iniziare, abbiamo creato dei tutorial sull'utilizzo di Elementi personalizzati v1 e Shadow DOM v1.
webcomponents.org
Anche la community dei componenti web sta crescendo a passi da gigante. Siamo entusiasti del lancio di un sito webcomponents.org aggiornato, il punto focale della community dei componenti web, che include un catalogo integrato in cui gli sviluppatori possono condividere i loro elementi.
Il sito webcomponents.org contiene informazioni sulle specifiche dei componenti web, sugli aggiornamenti e sui contenuti della community dei componenti web e mostra la documentazione relativa agli elementi open source e alle raccolte di elementi create da altri sviluppatori.
Puoi iniziare a creare il tuo primo elemento utilizzando una libreria come Polymer di Google o semplicemente usare direttamente le API dei componenti web di basso livello. Quindi pubblica il tuo elemento su webcomponents.org.
Buon lavoro con i componenti!