Content
- Què són els components web?
- Els 4 pilars dels components web
- 01. Elements personalitzats
- 02. Plantilles HTML
- 03. Ombra DOM
- 04. Mòduls ES i HTML
Amb els components web, els desenvolupadors ara poden crear els seus propis elements HTML. En aquesta guia definitiva, aprendràs tot el que necessites saber. En aquesta pàgina, tractarem què són exactament els components web, els avantatges d’utilitzar-los i els elements que els componen.
A continuació, aprendreu a construir els vostres propis components en dos breus tutorials: a la pàgina 2 aprendreu a construir un component amb les plantilles HTML i les API shadowDOM i, a la pàgina 3, obtindreu un pas més i aprendreu com per crear un element integrat personalitzat.
Finalment, a la pàgina 4 trobareu alguns marcs i eines per començar, i exemples d’elements existents per provar avui. (Per obtenir més eines, consulteu el nostre resum d'eines de disseny web i la nostra selecció dels millors creadors de llocs web.)
Mentre esteu aquí, és possible que també vulgueu fer una ullada a la nostra guia de les principals API HTML i a com fer-les servir, així com als nostres millors exemples de desplaçament en paral·lel.
Què són els components web?
Als desenvolupadors els encanten els components. Són una manera fantàstica de definir blocs de codi que es poden deixar caure i reutilitzar allà on siguin necessaris. Al llarg dels anys, hi ha hagut alguns intents de transmetre aquesta idea a la xarxa, amb diferents graus d’èxit.
El llenguatge d’enllaç XML de Mozilla i les especificacions de components HTML de Microsoft es remunten a Internet Explorer 5 fa gairebé 20 anys. Malauradament, tots dos intents es van demostrar difícils, no van aconseguir tracció en altres navegadors i finalment es van eliminar. Tot i que potser no hi són actuals, els seus conceptes van constituir la base dels enfocaments moderns en ús.
Els marcs JavaScript com React, Vue o Angular segueixen un enfocament similar. Una de les principals raons del seu èxit és la capacitat de contenir una lògica comuna en un patró fàcilment compartible en una forma o altra.
Tot i que aquests marcs poden millorar l’experiència del desenvolupador (igual que el servei d’allotjament web perfecte), ho fan a un cost. Cal compilar funcions de llenguatge com JSX i molts frameworks es basen en un temps d’execució per gestionar totes les seves abstraccions. No seria més fàcil si hi hagués una manera d’obtenir el benefici sense tot aquest pes tan gran? Els components web ens permeten fer això.
Voleu crear un lloc pesat de mitjans? Obteniu la còpia de seguretat que necessiteu amb aquestes opcions d'emmagatzematge al núvol.
Els 4 pilars dels components web
El concepte de component web consta de tres API: elements personalitzats, plantilles HTML i DOM ombra, amb mòduls JavaScript que els uneixen. Combinant els avantatges que ofereixen aquestes tecnologies, és possible començar a crear elements HTML personalitzats que tinguin un aspecte i un comportament igual que els seus homòlegs natius.
L’ús d’un component web és molt semblant a l’ús de qualsevol altre element HTML existent. Es poden configurar mitjançant atributs, consultar-los per utilitzar JavaScript i fins i tot dissenyar-los mitjançant CSS. Mentre el navegador sàpiga que existeixen, no es tracten de manera diferent.
Això també permet als components web jugar bé amb altres frameworks i biblioteques. En utilitzar els mateixos mecanismes de comunicació que qualsevol altre element, es poden utilitzar junt amb qualsevol marc existent avui o en el futur.
El més important de tot és que tots es basen en els estàndards web. El web es basa en un concepte de compatibilitat inversa i, en construir un component web avui en dia, continuarà treballant durant els propers anys.
Abans d’anar més lluny, hauríem de fer un cop d’ull a què conformen aquestes especificacions i a com es pot crear i utilitzar-ne una avui.
01. Elements personalitzats
Característiques clau:
- Definiu el comportament d’un element
- Reaccioneu als canvis d’atribut
- Augmenteu els elements existents
Quan escolteu que la gent parla de "components web", sovint es refereixen al funcionament inferior: l'API d'elements personalitzats.
Amb aquesta API, és possible crear classes que impulsin el funcionament intern d’un element. Es detallen exactament què cal fer quan s’afegeix, s’actualitza o s’elimina un element.
classe ExampleElement estén HTMLElement {static get observeAttributes () {return [...]; } attributeChangedCallback (name, oldValue, newValue) {} connectedCallback () {}} customElements.define ("exemple-element", ExampleElement);
Cada element personalitzat té una estructura similar. Amplien un existent HTMLElement class, que proporciona les bases per al comportament d’un element.
A l'interior, hi ha alguns mètodes anomenats reaccions que es diuen en resposta a alguna cosa sobre aquest canvi d’element. Per exemple, connectedCallback es cridarà quan aparegui el nou element a la pantalla. Funcionen de manera similar als mètodes de cicle de vida que es troben a la majoria de frameworks JavaScript.
L’actualització dels atributs d’un element pot canviar el seu comportament. Quan es produeix una actualització, el fitxer attributeChangedCallback es dispararà la reacció, que detalla el canvi. Això només passarà per a un atribut que es defineixi dins de la matriu observationAttributes.
Cal definir un element abans que el navegador pugui fer-hi res. El definir Aquí el mètode té dos arguments: el nom de l'etiqueta i la classe que hauria d'utilitzar. Tots els noms de les etiquetes han de contenir un fitxer - personatge per evitar xocs amb futurs elements natius.
exemple-element> Contingut / exemple-element>
L'element es pot escriure a qualsevol lloc de la pàgina com a etiqueta HTML normal. Un cop un navegador té un element definit, troba qualsevol d’aquestes etiquetes coincidents i vincula el seu comportament a la classe en un procés conegut com a “actualització”.
Hi ha dos tipus d'elements personalitzats: "autònom" o "integrat personalitzat". Els elements personalitzats autònoms, fins ara coberts, no estan relacionats amb cap element existent. Molt semblant a un div> o bé extensió> no aporten cap significat al seu contingut.
Un element integrat personalitzat, com el seu nom indica, pot millorar un element existent amb una nova funcionalitat. Mantenen els comportaments semàntics normals d’aquest element, alhora que estan oberts al canvi. Si un entrada> l'element es va personalitzar, per exemple, encara es recolliria i s'enviava com a part d'un formulari.
classe CustomInput amplia HTMLInputElement {} customElements.define ("custom-input", CustomInput, {extends: "input"});
La classe de components integrats personalitzats amplia la classe de l’element que està personalitzant. La definició també ha de definir l’etiqueta d’aquest element mitjançant el seu tercer argument.
input is = "entrada personalitzada" />
També s’utilitzen de forma lleugerament diferent. En lloc d'una etiqueta nova, amplien l'etiqueta existent mitjançant el fitxer és atribut. El navegador pot llegir-ho i actualitzar-lo de la mateixa manera que pot fer-ho amb un component autònom.
Tot i que la majoria de navegadors admeten elements personalitzats autònoms, només Chrome i Firefox admeten elements integrats personalitzats. Si s’utilitzen en un navegador que no els admet, tornaran a les versions habituals dels elements que personalitzen, cosa que pot fer que siguin segurs d’utilitzar.
02. Plantilles HTML
- Creeu estructures ja fetes
- Inert fins a la crida
- Conté HTML, CSS i JS
Històricament, la plantilla basada en navegadors implicava unir cadenes javascriptes o fer servir una biblioteca com Handlebars per analitzar un marcatge especial de blocs. Més recentment, l'especificació de plantilles HTML va definir el fitxer plantilla> , que pot contenir qualsevol cosa susceptible de ser reutilitzada.
template id = "tweet"> div> span> / span> Escrit per @span> / span> / div> / template>
Per si sol, no té aparença i es manté inert, és a dir, no hi ha res analitzat ni executat fins que no se li digui, incloses les sol·licituds de suports externs com ara imatges o vídeos. JavaScript tampoc no pot consultar el contingut, ja que els navegadors només el veuran com un element buit.
plantilla const = document. getElementById ("piulada"); node const = document. importNode (template.content, true); document.body.appendChild (node);
Una consulta habitual recollirà el fitxer plantilla> element en si. El importNode mètode crea una còpia del seu contingut, amb el segon argument que li diu que faci una còpia profunda de tot. Finalment, es pot afegir al document com qualsevol altre element.
Les plantilles poden contenir qualsevol cosa que pugui contenir una pàgina HTML, inclosos CSS i JavaScript. Tan bon punt s'aplica l'element a la pàgina, s'apliquen aquests estils i s'executen els scripts. Tingueu en compte que aquests funcionaran a nivell mundial i, per tant, poden anul·lar estils i valors si no es té cura.
La millor part de les plantilles és que no només es limiten als components web. Els exemples aquí s'apliquen a qualsevol pàgina web, però esdevenen particularment potents quan es combinen amb components web, en particular el DOM ombra.
03. Ombra DOM
- Eviteu que es filtrin estils
- La denominació es fa més senzilla
- Mantingueu la lògica d'implementació a l'interior
El model d’objectes de document (o DOM) és la manera com el navegador interpreta l’estructura d’una pàgina. En llegir a través de l’HTML, es crea una idea sobre quins elements de la pàgina contenen quin contingut i s’utilitza per decidir què mostrar. Quan s’utilitza una cosa així document.getElementById () el navegador realment mira a través del DOM.
Pot ser que estigui bé per al disseny d’una pàgina, però, què passa amb els detalls d’implementació dins d’un element? Les pàgines no haurien de preocupar-se de què compon la interfície dins d'un fitxer vídeo> element per exemple. Aquí és on entra l’ombra DOM.
div id = "shadow-root"> / div> script> const host = document. getElementById ("host-shadow"); const shadow = host.attachShadow ({mode: "obert"}); / script>
Es crea un DOM ombra quan s'aplica a un element. Es pot afegir qualsevol contingut a l’ombra DOM igual que el DOM normal o “clar”, però no té cap efecte sobre el que passa fora d’ell.De la mateixa manera, res del DOM clar pot accedir directament al DOM ombra. Això vol dir que podem afegir classes, estils i scripts a qualsevol lloc de l’ombra DOM sense preocupar-nos dels xocs.
El millor ús del shadow DOM amb components web es combina amb un element personalitzat. En tenir un DOM ombra encarregat del contingut, cada vegada que es reutilitzi aquest component, els seus estils i estructura no afectaran la resta de la pàgina.
04. Mòduls ES i HTML
- Afegiu-hi on calgui
- No es requereix cap pas de construcció
- Deseu-ho tot en un sol lloc
Tot i que les tres especificacions anteriors han tingut camins d’èxit relativament senzills, el seu embalatge i la seva reutilització han estat des de fa molt de temps un punt decisiu.
Originalment, l’especificació d’Importacions HTML definia una manera per als navegadors d’incloure documents HTML, com ara CSS o JavaScript. Això permetria que els elements personalitzats, juntament amb les seves plantilles i el DOM ombra, poguessin viure en un altre lloc i importar-se segons sigui necessari.
Firefox va optar per no implementar les importacions HTML al seu navegador i va afavorir una nova especificació sobre la importació de mòduls JavaScript.
classe d'exportació ExampleElement amplia HTMLElement {...}
importeu {ExampleElement} de "ExampleElement.js";
Els mòduls no apliquen el seu contingut de manera global per defecte. Marcant certes variables, funcions o classes com a exportades, es poden importar per qualsevol cosa que les necessiti i utilitzar-les com si fossin locals.
Això és de gran ajuda per als components web, ja que un element personalitzat que conté una plantilla i un DOM ombrejat es pot exportar des d’un fitxer i afegir-lo a un altre. Sempre que es defineixi en algun lloc de la línia, estarà llest per utilitzar-lo.
importeu {ExampleElement} des de "ExampleElement.html";
S'ha proposat una extensió a aquesta especificació per recuperar algunes de les facilitats de les importacions HTML, junt amb les importacions de mòduls. Permetran escriure components web utilitzant HTML declaratiu i semàntic. Encapçalada per Microsoft, aquesta funció aviat arribarà a Chrome i al navegador Edge basat en Chromium.
Pàgina següent: Com construir els vostres propis components
