Contenuto
- Cosa sono i componenti web?
- I 4 pilastri dei componenti web
- 01. Elementi personalizzati
- 02. Modelli HTML
- 03. Shadow DOM
- 04. ES e moduli HTML
Con i componenti Web, gli sviluppatori ora hanno la possibilità di creare i propri elementi HTML. In questa guida definitiva imparerai tutto ciò che devi sapere. In questa pagina, tratteremo cosa sono esattamente i componenti web, i vantaggi del loro utilizzo e gli elementi che li compongono.
Quindi imparerai come costruire i tuoi componenti in due brevi tutorial: a pagina 2 imparerai come costruire un componente con i modelli HTML e le API shadowDOM, e a pagina 3 farai un ulteriore passo avanti e imparerai come per costruire un elemento integrato personalizzato.
Infine a pagina 4 troverai alcuni framework e strumenti per iniziare ed esempi di elementi esistenti da provare oggi. (Per ulteriori strumenti, consulta il nostro riepilogo degli strumenti di web design e la nostra selezione dei migliori costruttori di siti web.)
Mentre sei qui, potresti anche dare un'occhiata alla nostra guida alle principali API HTML e a come usarle, oltre ai nostri migliori esempi di scorrimento parallasse.
Cosa sono i componenti web?
Gli sviluppatori amano i componenti. Sono un ottimo modo per definire blocchi di codice che possono essere inseriti e riutilizzati ovunque siano richiesti. Nel corso degli anni, ci sono stati alcuni tentativi di trasmettere questa idea sul web, con diversi gradi di successo.
L'XML Binding Language di Mozilla e le specifiche dei componenti HTML di Microsoft risalgono a Internet Explorer 5 quasi 20 anni fa. Sfortunatamente, entrambi i tentativi si sono rivelati ingombranti, non sono riusciti a guadagnare trazione in altri browser e alla fine sono stati rimossi. Sebbene possano non essere disponibili oggi, i loro concetti hanno costituito la base degli approcci moderni in uso.
Framework JavaScript come React, Vue o Angular seguono un approccio simile. Uno dei motivi principali del loro successo è la capacità di contenere la logica comune in uno schema facilmente condivisibile in una forma o nell'altra.
Sebbene questi framework possano migliorare l'esperienza degli sviluppatori (così come il perfetto servizio di web hosting), lo fanno a un costo. Le funzionalità del linguaggio come JSX devono essere compilate e molti framework si basano su un runtime per gestire tutte le loro astrazioni. Non sarebbe più facile se ci fosse un modo per ottenere il vantaggio senza tutto quel peso? I componenti Web ci consentono di fare proprio questo.
Stai creando un sito ad alto contenuto multimediale? Ottieni il backup di cui hai bisogno con queste opzioni di archiviazione cloud.
I 4 pilastri dei componenti web
Il concetto di un componente web è costituito da tre API - elementi personalizzati, modelli HTML e shadow DOM - con moduli JavaScript che li incollano insieme. Combinando i vantaggi offerti da queste tecnologie, è possibile iniziare a creare elementi HTML personalizzati che hanno l'aspetto e si comportano esattamente come le loro controparti native.
L'utilizzo di un componente Web è molto simile all'utilizzo di qualsiasi altro elemento HTML esistente. Possono essere configurati utilizzando attributi, interrogati per l'utilizzo di JavaScript e persino stilizzati tramite CSS. Finché il browser sa che esistono, non vengono trattati in modo diverso.
Ciò consente inoltre ai componenti Web di funzionare bene con altri framework e librerie. Utilizzando gli stessi meccanismi di comunicazione di qualsiasi altro elemento, possono essere utilizzati insieme a qualsiasi framework esistente oggi o in futuro.
Soprattutto, questi sono tutti basati su standard web. Il Web si basa su un concetto di retrocompatibilità e, costruendo oggi un componente Web, continuerà a funzionare per gli anni a venire.
Ma prima di andare oltre, dovremmo dare un'occhiata a ciò che compone queste specifiche e come puoi crearne e usarne una oggi.
01. Elementi personalizzati
CARATTERISTICHE PRINCIPALI:
- Definisci il comportamento di un elemento
- Reagisci ai cambiamenti degli attributi
- Aumenta gli elementi esistenti
Quando senti le persone parlare di "componenti web", molto spesso si riferiscono al funzionamento sottostante: l'API degli elementi personalizzati.
Con questa API è possibile creare classi che alimentano il funzionamento interno di un elemento. Descrivono esattamente cosa fare quando un elemento viene aggiunto, aggiornato o rimosso.
class ExampleElement estende HTMLElement {static get viewedAttributes () {return […]; } attributeChangedCallback (name, oldValue, newValue) {} connectedCallback () {}} customElements.define ("example-element", ExampleElement);
Ogni elemento personalizzato ha una struttura simile. Estendono un'esistente HTMLElement class, che fornisce le basi per come dovrebbe comportarsi un elemento.
All'interno, ci sono alcuni metodi chiamati reazioni che vengono chiamati in risposta a qualcosa sul cambiamento di quell'elemento. Per esempio, connectedCallback verrà chiamato quando il nuovo elemento appare sullo schermo. Funzionano in modo simile ai metodi del ciclo di vita presenti nella maggior parte dei framework JavaScript.
L'aggiornamento degli attributi su un elemento può cambiare il modo in cui si comporta. Quando si verifica un aggiornamento, il file attributoChangedCallback la reazione si attiverà, che descrive in dettaglio il cambiamento. Ciò accadrà solo per un attributo definito all'interno dell'array ObservedAttributes.
Un elemento deve essere definito prima che il browser possa utilizzarlo. Il definire il metodo qui accetta due argomenti: il nome del tag e la classe che dovrebbe usare. Tutti i nomi dei tag devono contenere un file - personaggio per evitare eventuali scontri con eventuali futuri elementi nativi.
elemento-esempio> Contenuto / elemento-esempio>
L'elemento può quindi essere scritto ovunque nella pagina come un normale tag HTML. Una volta che un browser ha definito un elemento, trova uno di questi tag corrispondenti e collega il loro comportamento alla classe in un processo noto come "aggiornamento".
Esistono due tipi di elementi personalizzati: "autonomo" o "integrato personalizzato". Gli elementi personalizzati autonomi, che sono stati coperti fino ad ora, non sono correlati a nessun elemento esistente. Proprio come un file div> o span> non forniscono alcun significato al loro contenuto.
Un elemento integrato personalizzato, come suggerisce il nome, può migliorare un elemento esistente con nuove funzionalità. Mantengono i normali comportamenti semantici di quell'elemento, pur essendo anche aperti al cambiamento. Se uno input> elemento è stato personalizzato, ad esempio, sarebbe stato comunque prelevato e inviato come parte di un modulo.
la classe CustomInput estende HTMLInputElement {} customElements.define ("custom-input", CustomInput, {extends: "input"});
La classe del componente integrato personalizzato estende la classe dell'elemento che sta personalizzando. La definizione deve anche definire il tag di quell'elemento attraverso il suo terzo argomento.
input è = "custom-input" />
Sono anche usati in modo leggermente diverso. Invece di un nuovo tag, estendono il tag esistente utilizzando il è attributo. Il browser può leggerli e aggiornarli allo stesso modo di un componente autonomo.
Sebbene la maggior parte dei browser supporti elementi personalizzati autonomi, solo Chrome e Firefox supportano elementi integrati personalizzati. Se utilizzati in un browser che non li supporta, torneranno alle versioni normali degli elementi che personalizzano, il che può renderli sicuri da usare.
02. Modelli HTML
- Crea strutture già pronte
- Inerte fino a quando non viene chiamato
- Contiene HTML, CSS e JS
Storicamente, la creazione di modelli basati su browser implicava l'unione di stringhe in JavaScript o l'utilizzo di una libreria come Handlebars per analizzare un markup speciale di blocco. Più recentemente, la specifica dei modelli HTML ha definito il file modello> tag, che può contenere qualsiasi cosa che possa essere riutilizzata.
template id = "tweet"> div> span> / span> Scritto da @span> / span> / div> / template>
Di per sé, non ha aspetto e rimane inerte, il che significa che nulla all'interno viene analizzato o eseguito fino a quando non viene detto, comprese le richieste di supporti esterni come immagini o video. JavaScript non può nemmeno interrogare i contenuti, poiché i browser lo vedranno solo come un elemento vuoto.
const template = documento. getElementById ("tweet"); const node = documento. importNode (template.content, true); document.body.appendChild (nodo);
Una query regolare rileverà il file modello> elemento stesso. Il importNode metodo crea una copia del suo contenuto, con il secondo argomento che gli dice di prendere una copia completa di tutto. Infine, può essere aggiunto al documento come qualsiasi altro elemento.
I modelli possono contenere tutto ciò che può contenere una pagina HTML, inclusi CSS e JavaScript. Non appena l'elemento viene applicato alla pagina, vengono applicati quegli stili e gli script vengono eseguiti. Tieni presente che questi verranno eseguiti a livello globale e quindi possono sovrascrivere stili e valori se non viene prestata attenzione.
La parte migliore dei modelli è che non si limitano solo ai componenti web. Gli esempi qui si applicano a qualsiasi pagina Web, ma diventano particolarmente potenti se associati a componenti Web, in particolare allo shadow DOM.
03. Shadow DOM
- Evita che gli stili fuoriescano
- La denominazione diventa più semplice
- Mantieni la logica di implementazione all'interno
Il Document Object Model, o "DOM", è il modo in cui il browser interpreta la struttura di una pagina. Leggendo l'HTML, costruisce un'idea su quali elementi nella pagina contengono quale contenuto e lo usa per decidere cosa mostrare. Quando si utilizza qualcosa di simile document.getElementById () il browser sta effettivamente guardando attraverso il DOM.
Questo può andare bene per il layout di una pagina, ma per quanto riguarda i dettagli di implementazione all'interno di un elemento? Le pagine non dovrebbero preoccuparsi di ciò che costituisce l'interfaccia all'interno di un file video> elemento per esempio. È qui che entra in gioco il DOM ombra.
div id = "shadow-root"> / div> script> const host = document. getElementById ("shadow-host"); const shadow = host.attachShadow ({mode: "open"}); / script>
Un DOM ombra viene creato quando applicato a un elemento. Qualsiasi contenuto può essere aggiunto al DOM ombra proprio come il DOM normale, o "leggero", ma non ha alcun effetto su ciò che accade al di fuori di esso.Allo stesso modo, niente nel DOM luminoso può accedere direttamente al DOM ombra. Ciò significa che possiamo aggiungere classi, stili e script ovunque nello shadow DOM senza preoccuparci degli scontri.
Il miglior utilizzo dello shadow DOM con i componenti web viene fornito se accoppiato con un elemento personalizzato. Avendo uno shadow DOM responsabile del contenuto, ogni volta che questo componente viene riutilizzato, i suoi stili e la sua struttura non influenzeranno il resto della pagina.
04. ES e moduli HTML
- Aggiungi dove necessario
- Nessun requisito di fase di costruzione
- Tieni tutto in un unico posto
Mentre le tre specifiche precedenti hanno avuto percorsi relativamente semplici per il successo, il loro confezionamento e la loro riutilizzabilità sono stati a lungo un punto critico.
In origine, la specifica HTML Imports definiva un modo per i browser di includere documenti HTML, proprio come CSS o JavaScript è già oggi. Ciò consentirebbe agli elementi personalizzati, insieme ai loro modelli e al DOM ombra, di vivere altrove e importati secondo necessità.
Firefox ha scelto di non implementare le importazioni HTML nel suo browser, preferendo invece una specifica più recente sull'importazione dei moduli JavaScript.
la classe di esportazione ExampleElement estende HTMLElement {…}
import {ExampleElement} da "ExampleElement.js";
I moduli non applicano il loro contenuto a livello globale per impostazione predefinita. Contrassegnando determinate variabili, funzioni o classi come esportate, possono essere importate da tutto ciò che ne ha bisogno e utilizzate come se fossero locali.
Questo è di grande aiuto per i componenti web, poiché un elemento personalizzato contenente un modello e un DOM ombra può essere esportato da un file e aggiunto a un altro. Finché viene definito da qualche parte lungo la linea, è pronto per l'uso.
import {ExampleElement} da "ExampleElement.html";
È stata proposta un'estensione a questa specifica per riportare un po 'della facilità di importazione HTML, insieme all'importazione di moduli. Consentiranno di scrivere componenti web utilizzando HTML dichiarativo e semantico. Guidata da Microsoft, questa funzione sarà presto disponibile su Chrome e sul browser Edge basato su Chromium.
Pagina successiva: Come costruire i propri componenti
