Hace ya tiempo que los de­sa­rro­lla­do­res utilizan marcos de trabajo o fra­me­wo­r­ks de Ja­va­S­cri­pt como, por ejemplo, React o Angular, para definir elementos web que puedan re­uti­li­zar. Sin embargo, cada framework utiliza un estándar diferente, lo cual impide en muchos casos que se puedan aplicar los llamados code snippets o fra­g­me­n­tos de código, que resultan muy útiles por ser comunes a di­fe­re­n­tes proyectos. Por suerte, existen los llamados web co­m­po­ne­nts (co­m­po­ne­n­tes web): elementos HTML re­uti­li­za­bles y co­m­pa­ti­bles con todos los marcos de trabajo. Es­ta­n­da­ri­za­do en 2012, este tipo de elementos web ya puede usarse en todos los na­ve­ga­do­res más populares.

¿Qué son los co­m­po­ne­n­tes web?

Los co­m­po­ne­n­tes web son bloques de código que en­ca­p­su­lan la es­tru­c­tu­ra interna de elementos HTML, in­clu­ye­n­do CSS y Ja­va­S­cri­pt, pe­r­mi­tie­n­do así que el código se pueda volver a usar como se quiera en otras webs y apli­ca­cio­nes. El concepto fue de­sa­rro­lla­do por un grupo de trabajo del World Wide Web Co­n­so­r­tium (W3C), creado en 1994 por Tim Berners-Lee, co­n­si­de­ra­do el padre de la Web.  Este grupo trabaja desde entonces por la es­ta­n­da­ri­za­ción de todas las te­c­no­lo­gías básicas de la red. El modelo de co­m­po­ne­n­tes web que se publicó en 2012 establece pri­n­ci­pa­l­me­n­te cuatro es­pe­ci­fi­ca­cio­nes referidas a la creación de estos prácticos elementos HTML. Son las si­guie­n­tes:

  • Custom elements: conjuntos de API de Ja­va­S­cri­pt para definir elementos pe­r­so­na­li­za­dos por el usuario.
  • Shadow DOM: conjunto de API de Ja­va­S­cri­pt para añadir elementos DOM. 
  • ES Modules: módulos para integrar y re­uti­li­zar do­cu­me­n­tos de Ja­va­S­cri­pt.
  • HTML templates: pla­n­ti­llas HTML que no se muestran en la página web final y que pueden servir de base para ciertos elementos definidos por el usuario.

Todos los na­ve­ga­do­res co­n­ve­n­cio­na­les ya son co­m­pa­ti­bles con los co­m­po­ne­n­tes web es­tá­n­da­res. Para trabajar con los códigos HTML en­ca­p­su­la­dos, pueden usarse todos los fra­me­wo­r­ks o bi­blio­te­cas de Ja­va­S­cri­pt que trabajan con HTML.

¿Por qué conviene usar co­m­po­ne­n­tes web?

Algunas bi­blio­te­cas y fra­me­wo­r­ks, como Angular o jQuery, son desde hace años he­rra­mie­n­tas de trabajo ese­n­cia­les para los pro­gra­ma­do­res web. Si bien estas es­tru­c­tu­ras básicas de co­di­fi­ca­ción son prácticas, ve­r­sá­ti­les y ahorran mucho trabajo en el de­sa­rro­llo de proyectos, resultan con fre­cue­n­cia in­fle­xi­bles a la hora de usarlas en más de un proyecto. Así, no es raro para un de­sa­rro­lla­dor tener que volver a escribir un código cada vez que hay un cambio de framework, por ejemplo. Para tratar de so­lu­cio­nar este problema, el Consorcio W3C introdujo los co­m­po­ne­n­tes web, creando así un marco universal para poder re­uti­li­zar códigos HTML, CSS y de Ja­va­S­cri­pt de una forma simple y común a los tres lenguajes.

Puesto que los elementos web uni­ve­r­sa­les se ca­ra­c­te­ri­zan por una sintaxis sencilla y fácil de aprender, los pro­gra­ma­do­res con menos ex­pe­rie­n­cia también se be­ne­fi­cian de este estándar del W3C. Desde hace algunos años, Google trabaja en el llamado Polymer Project para de­sa­rro­llar bi­blio­te­cas y pla­n­ti­llas de pro­gra­ma­ción de co­m­po­ne­n­tes web para ponerlas a di­s­po­si­ción del público general.

Las partes que componen los web co­m­po­ne­nts

El modelo de los co­m­po­ne­n­tes web se basa pri­n­ci­pa­l­me­n­te en cuatro es­pe­ci­fi­ca­cio­nes que ex­pli­ca­re­mos en detalle a co­n­ti­nua­ción, usando, además, ejemplos concretos.

Custom elements

Los custom elements (elementos definidos por el usuario) son etiquetas HTML que en­ca­p­su­lan contenido HTML, in­clu­ye­n­do di­re­c­tri­ces CSS y scripts. Se alistan en el Cu­s­to­mE­le­me­n­tRe­gi­s­try y sus ca­ra­c­te­rí­s­ti­cas más im­po­r­ta­n­tes son las si­guie­n­tes:

  • Acaban con una etiqueta de cierre.
  • Su nombre es una secuencia DOM y siempre contiene un guion.
  • Su nombre solo puede aparecer una vez en el Cu­s­to­mE­le­me­n­tRe­gi­s­try.

Para crear un custom element se necesita Ja­va­S­cri­pt y el método define. El siguiente co­m­po­ne­n­te web muestra un custom element mediante el cual se puede integrar un button:

customElements.define('my-button', MyButton, { extends: 'p' });

Para poder usar ahora este elemento en una apli­ca­ción web, basta con el siguiente código:

<my-button></my-button>

Shadow DOM

La principal ca­ra­c­te­rí­s­ti­ca de los co­m­po­ne­n­tes web es su capacidad para en­ca­p­su­lar elementos HTML. La API Shadow DOM facilita esta tarea porque permite añadir árboles DOM ocultos a un árbol de do­cu­me­n­tos, de forma que solo sea visible la etiqueta HTML del Shadow DOM. De esta forma, pueden añadirse elementos HTML al DOM oculto sin tener que alterar cada vez también el DOM principal. En nuestro artículo sobre Shadow DOM y su modo de fu­n­cio­na­mie­n­to hemos recogido toda la in­fo­r­ma­ción sobre esta técnica y casos de uso es­pe­cí­fi­cos.

ES modules

Los ES modules son módulos que exportan objetos, funciones o variables desde un archivo de Ja­va­S­cri­pt. Al hacerlo, pueden dividir variables en grupos dentro de un mismo archivo y re­fe­re­n­ciar­las. Ac­tua­l­me­n­te, existen dos sistemas de ES modules. Mientras que CommonJS ori­gi­na­l­me­n­te pe­r­te­ne­cía a Node.JS, el sistema más reciente ya está incluido en Ja­va­S­cri­pt ES6.

Para exportar una función desde una bi­blio­te­ca de Ja­va­S­cri­pt, utiliza el método export. En el siguiente ejemplo, se exporta una función que devuelve un input string dos veces.

// ? lib.bib1
export const repeat = (string) => `${string} ${string}`;
}

Con import se puede volver a solicitar la función exportada tantas veces como se quiera.

main.mjs
import {repeat} from './lib.mein';
repeat ('Buenos días');
// → 'Buenos días Buenos días'

HTML templates

Las llamadas HTML templates son pla­n­ti­llas de archivos HTML. Los elementos que contienen se mantienen inactivos y sin re­n­de­ri­zar (sin ser re­pre­se­n­ta­dos grá­fi­ca­me­n­te) hasta que sean so­li­ci­ta­dos ex­plí­ci­ta­me­n­te. Esta ca­ra­c­te­rí­s­ti­ca hace que no pe­r­ju­di­quen el tiempo de carga de las páginas web. Son, por lo tanto, una buena al­te­r­na­ti­va a los métodos de Ja­va­S­cri­pt tra­di­cio­na­les.

Con la etiqueta <template> se define una plantilla HTML. En el siguiente ejemplo, la plantilla creada lleva el nombre my element.

<template id="my-element">
<p>My element</p>
</template>

Para utilizar la plantilla en una página web, actívala con los métodos de Ja­va­S­cri­pt ge­tE­le­me­n­t­b­yId y content e intégrala en el DOM.

let template = document.getElementById('my-element');
let templateContent = template.content;
document.body.appendChild(templateContent);

¿Cómo usar los co­m­po­ne­n­tes web?

Los ejemplos an­te­rio­res solo funcionan si se combinan entre sí las partes que forman el modelo de co­m­po­ne­n­tes web. A co­n­ti­nua­ción, te ex­pli­ca­mos cómo hacerlo paso a paso:

  1. Crea una clase o función de Ja­va­S­cri­pt o expórtala desde un archivo Ja­va­S­cri­pt existente usando ES modules.
  2. Registra tu nuevo custom element con el método Cu­s­to­mE­le­me­n­tRe­gi­s­try.define().
  3. Si lo necesitas o así lo deseas, integra un Shadow DOM oculto para añadir elementos hijo (child elements) a tu custom element.
  4. Define una plantilla o HTML template con las etiquetas <template> y <slot>.
  5. En tu página web, utiliza el custom element creado como si de un elemento HTML normal se tratase.

Este tutorial muestra una sencilla in­tro­du­c­ción a la pro­gra­ma­ción de web co­m­po­ne­nts:

6_LrK6Ky78k.jpg Para mostrar este video, se requieren cookies de terceros. Puede acceder y cambiar sus ajustes de cookies aquí.

Co­m­pa­ti­bi­li­dad de los co­m­po­ne­n­tes web según la versión del navegador

Algunas versiones antiguas de ciertos na­ve­ga­do­res no son co­m­pa­ti­bles con co­m­po­ne­n­tes web. Ac­tua­l­me­n­te, todos los na­ve­ga­do­res populares ya permiten usar custom elements, shadow DOM, ES modules y HTML templates. La tabla que se muestra a co­n­ti­nua­ción resume las co­m­pa­ti­bi­li­da­des de los distintos web co­m­po­ne­nts.

¿Co­m­pa­ti­ble? Firefox Chrome Edge Safari Opera
Custom elements Sí Sí Sí (a partir de la versión 76) Sí Sí
Shadow DOM Sí Sí Sí (a partir de la versión 75) Sí Sí
ES modules Sí Sí Sí Sí Sí
HTML templates Sí Sí Sí Sí Sí

Bi­blio­te­cas, pla­n­ti­llas y ejemplos de web co­m­po­ne­nts

Es­pe­cia­l­me­n­te en los comienzos, programar co­m­po­ne­n­tes web puede resultar co­m­pli­ca­do. En la web, sin embargo, existen numerosas bi­blio­te­cas con pla­n­ti­llas, funciones es­tá­n­da­res y ejemplos prácticos de web co­m­po­ne­nts que te harán el trabajo más fácil:

  • Lit Element: una base sencilla para crear co­m­po­ne­n­tes web.
  • Polymer Project: dentro del marco del Polymer Project, Google ofrece di­fe­re­n­tes he­rra­mie­n­tas para trabajar con co­m­po­ne­n­tes web. Entre muchos otros elementos listos para usar, hay un kit de ini­cia­ción para programar apps con co­m­po­ne­n­tes web y una bi­blio­te­ca de pla­n­ti­llas HTML para Ja­va­S­cri­pt, por ejemplo.
  • Hybrids: sencilla bi­blio­te­ca de UI para crear co­m­po­ne­n­tes web.
  • Slim.js: bi­blio­te­ca con pro­pie­da­des ampliadas para web basada en la herencia de clases de Ja­va­S­cri­pt ES6.
Ir al menú principal