En el anterior artículo conocimos qué son los Web Components y por qué estas especificaciones representan una novedad muy significativa en el mundo del desarrollo de interfaces de usuario y aplicaciones web con Javascript del lado del cliente en general.

Conocimos que una de las especificaciones es la de "Custom Elements", que quizás sea la más representativa porque es la que nos permite hacer nuevos elementos del HTML, que realizan funcionalidades personalizadas o presentan información de una nueva manera. Además, estos Custom Elements los puedes usar directamente en tu página, sin necesidad de programación. Para ser correctos el desarrollador que crea el custom element generalmente sí necesitará realizar tareas de programación, aunque todos aquellos que lo usen, lo harán mediante la expresión de una etiqueta, de manera declarativa.

Actualización: Hemos actualizado el código de este artículo para mostrar los ejemplos usando el estándar definitivo de Web Components V1, que es el que finalmente se ha instaurado, así que el texto está al día. El vídeo final no obstante pertenece a una versión antigua de Web Components.

Los Custom Elements no son algo totalmente ajeno al HTML tradicional. Si lo ves bien, un ejemplo de Custom Element que conocemos de toda la vida es una etiqueta SELECT, que permite definir por medio de un código HTML sencillo un componente que tiene un comportamiento propio: lo pulsamos y nos permite ver varias opciones sobre las que podemos escoger una o varias. Esos SELECT los podemos agrupar con otros campos para hacer componentes mayores, como serían formularios. Obviamente, esos elementos existen desde toda la vida y no los habíamos entendido desde la perspectiva de los web components, pero nos hacen entender bien en qué se basa esta novedad de los custom elements.

Desarrollo con VanillaJS

En este y en los próximos artículos del manual de Web Components vamos a aprender a usar las diferentes especificaciones de web componets usando Javascript estándar, o sea, lo que se conoce en el argot de los desarrolladores como VanillaJS. Es importante porque veremos que para crear nuevos custom elements no necesito ninguna librería externa al Javascript que ya te soportan de manera nativa los navegadores.

No obstante, debemos insistir en que el desarrollo de web components será mucho más rápido si nos basamos en alguna librería que nos facilite ciertos procesos habituales, principalmente por hacer nuestras horas de desarrollo más productivas.

Las librerías como Polymer, LitElement o Stencil también nos aportan una capa adicional en relación a la compatibilidad, además de optimizar algunos procesos interesantes de cara a crear aplicaciones web más rápidas. Es por ello que los ejemplos de este manual tienen un valor más didáctico que otra cosa, ya que conocer los procesos de Javascript para la creación de Web Components ayudará mucho a la hora de entender cómo se realizan usando una librería por encima.

Creamos nuestro primer Custom Element

Iremos poco a poco introduciéndonos en el mundo de los Custom Elements, creando elementos sencillos que no nos compliquen demasiado la vida inicialmente. Obviamente, de momento no serán los más atractivos funcional o estéticamente, pero facilitará el aprendizaje.

Verás que sencillo es esto. Vamos a crear un componente llamado "dw-holamundo". Una vez definido lo usaremos de esta manera:

<dw-holamundo></dw-holamundo>

Ciertamente, la etiqueta "dw-holamundo" no existe en el HTML, pero gracias a los Web Components la podemos crear para usarla en nuestra página. Es tan sencillo como registrarla, por su nombre, mediante Javascript. Para ello necesitarenis haber definido una clase (de programación orientada a objetos) que implemente el componente. El código resumido podría parecerse algo a esto.

<script>
class DwHolamundo extends HTMLElement {
  // Implementación del componente
}
customElements.define('dw-holamundo', DwHolamundo);
</script>

Ya está! tenemos registrado nuestro primer custom element y sabemos usarlo. Si estabas esperando alguna complejidad adicional, sentimos decepcionarte.

Nuestro problema es que, tal cual hemos hecho nuestro elemento personalizado, no hace absolutamente nada. Tendremos que asignarle algún comportamiento, alguna forma, lo que sea, para que realmente tenga sentido nuestro primer ejemplo. Ahora veremos cómo mejorarlo pero antes quiero que veas el código fuente de este ejercicio:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Primer Custom Element</title>
</head>
<body>
  <h1>Hola Mundo Web Components - Custom Element</h1>
	<p>No aparece nada porque no le hemos asignado ninguna función al Web Component</p>

  <!-- Uso mi Web Component -->
	<dw-holamundo></dw-holamundo>

  <script>
  class DwHolamundo extends HTMLElement {
    // Implementación del componente
  }
  customElements.define('dw-holamundo', DwHolamundo);
  </script>
</body>
</html>

¿No te está faltando algo? ¿Dónde está el script de la librería que da soporte a los web components? (es una pregunta con trampa)

La respuesta ya la debes saber, porque lo hemos comentado. Web Components es algo que funciona tal cual en los navegadores, Javascript puro y estándar. No obstante, quizás hayas pensado en la necesidad de usar un Polyfill, para que los navegadores antiguos puedan entender estas sentencias nuevas de Javascript.

Mejoramos el custom element para aplicar un comportamiento

Para aplicar algún comportamiento específico a nuestro primer web component se nos complica un poco el código, porque requerimos de varios pasos. Realmente son pocas sentencias con las que esperamos te familiarizarás rápidamente.

Básicamente, realizaremos estas acciones:

1. Decidir la clase molde que vamos a usar para partir como base para la especialización de nuestro componente. El la clase es algo propio de Javascript y es algo así como el molde con el que se va a crear el elemento personalizado. Podemos usar como molde otros elementos de HTML, o simplemente el prototipo de un elemento HTML genérico, que nos lo ofrece la clase que hemos usado para extender "HTMLElement"
2. Por medio del constructor de la clase, aplicar cualquier código Javascript que permita construir el componente con sus particularidades. Existen diversos eventos propios del estándar de los Custom Elements donde también puedo asignar comportamientos cuando se están creando los elementos, además del constructor. Por ejemplo el "connectedCallback", que se ejecuta cada vez que el custom element inserta en la página. Existen en el estándar varios eventos de estos para realizar acciones en distintos momentos del ciclo de vida de los web components. Los veremos más adelante con detalle

Ahora te muestro el código completo, solo la parte de Javascript que es la que ha cambiado, con estas tres acciones que acabamos de comentar.

class DwHolamundo extends HTMLElement {
  constructor() {
    super();
    this.textContent = 'Hola mundo!!!'
  }
}
customElements.define('dw-holamundo', DwHolamundo);

Tómate un tiempo para revisar el código y identifica estos tres bloques necesarios para poder definir nuestro elemento personalizado.

Verás que se define la clase del componente, que hemos llamado "DwHolamundo". Esta clase es la que implementará este custom element.

La clase se crea en base a otra clase, y por medio de la herencia (extends) conseguimos que nuestro componente especialice a otra etiqueta HTML existente. Ese prototipo en este caso, sobre el que partimos para definir nuestro custom element se llama "HTMLElement".

Ya en el código de implementación de la clase verás que se utiliza un método constructor. Los constructores sirven en programación orientada a objetos para resumir las tareas de inicialización de los objetos cuando se están creando. Es importante que el constructor llame a super(), que es una invocación al constructor de la clase padre, así se inicializa el componente genérico, y luego se realizan las acciones propias para inicializar nuestro nuevo custom element.

La única cosa propia de este componente que estamos agregando encima del elemento HTML genérico está en la línea this.textContent = "Hola Mundo!";. Por medio de este código solamente se está accediendo al elemento concreto que se está creando y asignando un texto a su propiedad "textContent", con lo que conseguiremos escribir algo dentro del contenido del Custom Element que se está definiendo.

El código que estoy usando lo tienes en GitHub en esta dirección: Código hola-mundo-web-components.html del repositorio de ejemplos de web components.

Ten en cuenta que este primer custom element lo hemos hecho muy sencillo, evitando tocar algunos temas importantes, que reservamos para próximos artículos del Manual de Web Components. Más que nada por dejar las cosas fáciles al principio y evitar más complejidades de las estrictamente necesarias para este "hola mundo".

Videotutorial de creación de Web Components con Javascript estándar

Para completar y ampliar estas explicaciones te recomendamos ver el siguiente vídeo en el que mostramos cómo se crean Web Components con Javascript nativo, es decir, sin usar ninguna librería más allá de las que nos ofrece el estándar de Javascript.

Por favor, ten en cuenta que este vídeo fue grabado con un código ligéramente diferente, ya que utilizaba la versión anterior de Web components que finalmente no vió la luz como un estándar definitivo. Por tanto, sigue las indicaciones en el texto del artículo que acabas de leer.