Los web components en detalle
Hace ya tiempo que los desarrolladores utilizan marcos de trabajo o frameworks de JavaScript como, por ejemplo, React o Angular, para definir elementos web que puedan reutilizar. Sin embargo, cada framework utiliza un estándar diferente, lo cual impide en muchos casos que se puedan aplicar los llamados code snippets o fragmentos de código, que resultan muy útiles por ser comunes a diferentes proyectos. Por suerte, existen los llamados web components (componentes web): elementos HTML reutilizables y compatibles con todos los marcos de trabajo. Estandarizado en 2012, este tipo de elementos web ya puede usarse en todos los navegadores más populares.
¿Qué son los componentes web?
Los componentes web son bloques de código que encapsulan la estructura interna de elementos HTML, incluyendo CSS y JavaScript, permitiendo así que el código se pueda volver a usar como se quiera en otras webs y aplicaciones. El concepto fue desarrollado por un grupo de trabajo del World Wide Web Consortium (W3C), creado en 1994 por Tim Berners-Lee, considerado el padre de la Web. Este grupo trabaja desde entonces por la estandarización de todas las tecnologías básicas de la red. El modelo de componentes web que se publicó en 2012 establece principalmente cuatro especificaciones referidas a la creación de estos prácticos elementos HTML. Son las siguientes:
- Custom elements: conjuntos de API de JavaScript para definir elementos personalizados por el usuario.
- Shadow DOM: conjunto de API de JavaScript para añadir elementos DOM.
- ES Modules: módulos para integrar y reutilizar documentos de JavaScript.
- HTML templates: plantillas 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 navegadores convencionales ya son compatibles con los componentes web estándares. Para trabajar con los códigos HTML encapsulados, pueden usarse todos los frameworks o bibliotecas de JavaScript que trabajan con HTML.
¿Por qué conviene usar componentes web?
Algunas bibliotecas y frameworks, como Angular o jQuery, son desde hace años herramientas de trabajo esenciales para los programadores web. Si bien estas estructuras básicas de codificación son prácticas, versátiles y ahorran mucho trabajo en el desarrollo de proyectos, resultan con frecuencia inflexibles a la hora de usarlas en más de un proyecto. Así, no es raro para un desarrollador tener que volver a escribir un código cada vez que hay un cambio de framework, por ejemplo. Para tratar de solucionar este problema, el Consorcio W3C introdujo los componentes web, creando así un marco universal para poder reutilizar códigos HTML, CSS y de JavaScript de una forma simple y común a los tres lenguajes.
Puesto que los elementos web universales se caracterizan por una sintaxis sencilla y fácil de aprender, los programadores con menos experiencia también se benefician de este estándar del W3C. Desde hace algunos años, Google trabaja en el llamado Polymer Project para desarrollar bibliotecas y plantillas de programación de componentes web para ponerlas a disposición del público general.
Las partes que componen los web components
El modelo de los componentes web se basa principalmente en cuatro especificaciones que explicaremos en detalle a continuación, usando, además, ejemplos concretos.
Custom elements
Los custom elements (elementos definidos por el usuario) son etiquetas HTML que encapsulan contenido HTML, incluyendo directrices CSS y scripts. Se alistan en el CustomElementRegistry y sus características más importantes son las siguientes:
- 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 CustomElementRegistry.
Para crear un custom element se necesita JavaScript y el método define. El siguiente componente 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 aplicación web, basta con el siguiente código:
<my-button></my-button>Shadow DOM
La principal característica de los componentes web es su capacidad para encapsular elementos HTML. La API Shadow DOM facilita esta tarea porque permite añadir árboles DOM ocultos a un árbol de documentos, 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 funcionamiento hemos recogido toda la información sobre esta técnica y casos de uso específicos.
ES modules
Los ES modules son módulos que exportan objetos, funciones o variables desde un archivo de JavaScript. Al hacerlo, pueden dividir variables en grupos dentro de un mismo archivo y referenciarlas. Actualmente, existen dos sistemas de ES modules. Mientras que CommonJS originalmente pertenecía a Node.JS, el sistema más reciente ya está incluido en JavaScript ES6.
Para exportar una función desde una biblioteca de JavaScript, 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 plantillas de archivos HTML. Los elementos que contienen se mantienen inactivos y sin renderizar (sin ser representados gráficamente) hasta que sean solicitados explícitamente. Esta característica hace que no perjudiquen el tiempo de carga de las páginas web. Son, por lo tanto, una buena alternativa a los métodos de JavaScript tradicionales.
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 JavaScript getElementbyId 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 componentes web?
Los ejemplos anteriores solo funcionan si se combinan entre sí las partes que forman el modelo de componentes web. A continuación, te explicamos cómo hacerlo paso a paso:
- Crea una clase o función de JavaScript o expórtala desde un archivo JavaScript existente usando ES modules.
- Registra tu nuevo custom element con el método CustomElementRegistry.define().
- Si lo necesitas o así lo deseas, integra un Shadow DOM oculto para añadir elementos hijo (child elements) a tu custom element.
- Define una plantilla o HTML template con las etiquetas <template> y <slot>.
- En tu página web, utiliza el custom element creado como si de un elemento HTML normal se tratase.
Este tutorial muestra una sencilla introducción a la programación de web components:
Compatibilidad de los componentes web según la versión del navegador
Algunas versiones antiguas de ciertos navegadores no son compatibles con componentes web. Actualmente, todos los navegadores populares ya permiten usar custom elements, shadow DOM, ES modules y HTML templates. La tabla que se muestra a continuación resume las compatibilidades de los distintos web components.
| ¿Compatible? | 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í |
Bibliotecas, plantillas y ejemplos de web components
Especialmente en los comienzos, programar componentes web puede resultar complicado. En la web, sin embargo, existen numerosas bibliotecas con plantillas, funciones estándares y ejemplos prácticos de web components que te harán el trabajo más fácil:
- Lit Element: una base sencilla para crear componentes web.
- Polymer Project: dentro del marco del Polymer Project, Google ofrece diferentes herramientas para trabajar con componentes web. Entre muchos otros elementos listos para usar, hay un kit de iniciación para programar apps con componentes web y una biblioteca de plantillas HTML para JavaScript, por ejemplo.
- Hybrids: sencilla biblioteca de UI para crear componentes web.
- Slim.js: biblioteca con propiedades ampliadas para web basada en la herencia de clases de JavaScript ES6.
Artículos similares
Less CSS: presentación y tutorial
CSS es uno de los lenguajes más importantes de la World Wide Web. No obstante, trabajar con este lenguaje de stylesheet suele resultar tedioso, por lo que muchos desarrolladores prefieren usar Less. Este preprocesador de CSS no solo simplifica la escritura en lenguaje de hoja de estilo, sino que le añade útiles elementos como variables, funciones o mixins. Para saber cómo funciona, consulta…
Alternativas a Bootstrap: los mejores frameworks para frontend
Bootstrap es la solución más popular para la concepción y creación de interfaces de gran alcance. La colección de componentes HTML, CSS y JavaScript que Twitter publicó en 2011 bajo la licencia MIT, goza, sin duda, de una gran comunidad y de numerosas extensiones, interfaces para sistemas de gestión de contenidos y temas prediseñados. No obstante, existen diversas alternativas gratuitas a…
REDPIXEL.PLShutterstock Lenguajes de programación web: los más usados en Internet
¿Te gustaría conocer los lenguajes de programación web? El primer reto es elegir uno. Después de todo, existen cientos de lenguajes de programación, pero no todos ellos son apropiados para el desarrollo web. Para que te sea un poco más fácil decidirte y puedas comenzar con tu proyecto cuanto antes, te contamos un poco más sobre los lenguajes de programación web más populares.
spainter_vfxShutterstock La ingeniería inversa de software
La ingeniería inversa de software puede ayudar a descubrir y a conocer en profundidad su funcionamiento y su estructura. A través del desarrollo inverso de un software hasta el código fuente, no solo es posible detectar posibles fallos, sino también analizar los programas de la competencia. Por ello, la ingeniería inversa tiene numerosas y variadas aplicaciones. Pero ¿cómo se utiliza exactamente…
Polyfill: módulos de código para la web moderna
Los sitios web y las aplicaciones pasan por cambios constantes. Las nuevas características y funciones prometen a menudo mayor calidad, más seguridad o un mejor rendimiento del proyecto web, por lo que implementarlas es a menudo una mera formalidad. Sin embargo, muchos navegadores se quedan muy atrás en lo que respecta a la compatibilidad con las modernas tecnologías web, un problema que se puede…