2. Tu primer Web Component

En este vídeo usamos la API Custom Elements para fabricar un Custom Element (una de las tecnologías que integra Web Components), explicando cómo funciona la API de Custom Elements.

Fecha de emisión: 10 de mayo de 2019 • Duración: 19:04

Notas del episodio

Custom Elements es una API que permite construir etiquetas personalizadas HTML nuevas utilizando JavaScript. Una vez hayamos registrado esta etiqueta propia, la podremos emplear tal cual en el código fuente HTML de nuestra página web.

Por ejemplo, supongamos que en nuestra aplicación web tenemos que fabricar un componente que se ocupa de saludar por su nombre a la persona que está utilizando la aplicación. Algo que en otros tiempos hubiésemos construido directamente utilizando la siguiente pieza de HTML:

<p>Hola, Dani</p>

Uno de los requisitos de este componente es poder parametrizar mediante un atributo a quién queremos saludar. Con Custom Elements, podría disponer de un elemento que tenga un atributo para proporcionarle desde fuera el nombre de la persona a presentar en el texto, por ejemplo:

<saludo-basico persona="Dani"></saludo-basico>

Con Custom Elements podríamos declarar una clase JavaScript que nos habilite al uso de ese elemento.

Para ello, tendría que crear una clase de JavaScript que extienda a una de las clases HTML presentes en DOM, como por ejemplo HTMLElement. Puede que nunca hayas escuchado hablar sobre estas clases, pero si alguna vez has escrito código JavaScript como document.querySelector y has manipulado directamente atributos de los nodos que se devuelven, como puede ser document.querySelector('img').src = "foo", has estado usando todo este tiempo instancias de una de estas clases hechas simplemente para poder formalizar las etiquetas HTML dentro de la API DOM.

En nuestro caso, podríamos hacer una etiqueta nueva extendiendo a HTMLElement del siguiente modo:

class SaludoBasicoElement extends HTMLElement {
    // El código que escribamos luego, vendrá aquí
}

Dentro de esta clase tendremos que escribir una serie de métodos que se comportan como hooks. En determinados momentos, el navegador web llamará a estas funciones a medida que coloque y elimine etiquetas, de modo que nuestro elemento personalizado debe implementar esas funciones correctamente y realizar las acciones que queramos que se ejecuten cuando el navegador trate de interactuar con nuestra etiqueta.

Finalmente, para que el elemento sea usable como tal, es necesario registrarlo. Los navegadores web que soporten Custom Elements tienen un registro, para dar de alta estas clases que vamos fabricando, y asignarles un nombre que nos permita luego asociar la etiqueta HTML con la clase que queremos que defina el comportamiento de esa etiqueta. Por ejemplo, si quisiese registrar mi clase SaludoBasicoElement para que se use mediante la etiqueta HTML <saludo-basico>, tendría que llamar a la siguiente función:

window.customElements.define("saludo-basico", SaludoBasicoElement);

Como se puede ver, el primer parámetro es el nombre que quiero darle a la etiqueta, y el segundo será la propia clase que hay detrás de la etiqueta. Es importante que la etiqueta tenga al menos un guion en su nombre. Existe una razón por la cual todos los custom elements deben llevar un guion en su nombre: se trata de evitar problemas con posibles etiquetas nuevas que se inventen en el futuro y que se incorporen en futuras revisiones de HTML. La W3C nunca definirá en futuros estándares de HTML etiquetas que tengan un guion en su nombre. A cambio, nosotros jamás debemos definir un custom element de una palabra, no sea que en el futuro HTML pueda tener etiquetas nuevas como <location> (por decir algo), que puedan dar conflicto con custom elements que también se llamen así.

Lo normal, por ejemplo, es que cuando se fabrica una librería de componentes, se ponga un prefijo común a todos los elementos de esta librería. Con eso también evitamos que se puedan producir conflictos si dos equipos de desarrollo tratan de crear un componente que se llame igual. Así, podría tener un elemento como <org1-banner> para representar el elemento Banner creado por la Organizacion1, evitando conflictos con un hipotético <org2-banner>, que sería otro componente Banner pero creado por la Organizacion2.

La forma final de emplear en código HTML nuestro elemento personalizado, una vez lo hemos dado de alta en el registry, será escribir en el código fuente de la página, sin más, el custom element que acabamos de registrar, por ejemplo:

<body>
  <div>
    <saludo-basico></saludo-basico>
  </div>
</body>

Lista de reproducción

Este tema