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:

  1. Crea una clase o función de JavaScript o expórtala desde un archivo JavaScript existente usando ES modules.
  2. Registra tu nuevo custom element con el método CustomElementRegistry.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 introducción a la programación de web components:

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

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.
¿Le ha resultado útil este artículo?