Especificación Custom Elements, explicaciones y práctica

  • Por
Cómo realizar Custom Elements con Javascript básico, basando los estándares de los Web Components y sin usar ninguna librería.

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 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.

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 de este manual vamos a aprender a usar las diferentes especificaciones de los 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 o X-Tag 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.

Nota: Aunque en este artículo usaremos solamente la especificación de los Custom Elements, lo habitual es que se usen en conjunto varias, o todas, las especificaciones de Web Components.

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.

<script>
document.registerElement('dw-holamundo');
</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:

<p>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<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>
	//Registro el componente "dw-holamundo"
	document.registerElement('dw-holamundo');
	</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.

Nota: El tema de los Polyfill lo veremos con detalle más adelante, pero de momento tenemos que comentar que este código lo vas a poder ejecutar sin problemas en Chrome, que es el navegador, junto con Opera, que más adelantada lleva la incorporación de este estándar a su motor de Javascript. En un breve espacio de tiempo otros navegadores modernos tendrán total soporte a estas sentencias porque, insistimos, es Javascript nativo. También tienes más información en el artículo sobre qué son los Web Components.

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. Asignar un prototipo al componente que estamos construyendo. El prototipo 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.
  2. Por medio de una serie de eventos propios del estándar de los Custom Elements puedo asignar comportamientos cuando se están creando los elementos. Existen varios eventos a los que podemos asignar comportamientos especificos. De momento veremos el "createdCallback" que es una especie de constructor para inicializar un custom element en el momento de su creación. Este método manejador createdCallback se asigna como propiedad dentro del prototipo.
  3. Asignar el prototipo creado para este Custom Element cuando estoy registrando el elemento.

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.

//prototipo de elemento, a partir del elemento base
var prototipo = Object.create(HTMLElement.prototype);

// manejador del evento createdCallback,
//ocurre cuando se instancia el componente
prototipo.createdCallback = function() {
    console.log("Creado");
    //cambio el texto que hay en este elemento
    this.textContent = "Hola Mundo!";
};

//Registro el componente "dw-holamundo"
document.registerElement('dw-holamundo', {
    prototype: prototipo
});

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 el prototipo, luego se modifica un poco para finalmente registrar ese prototipo con el nombre del custom element que estás creando.

Verás que se asigna una función a prototipo.createdCallback, que es como un evento que puedes usar para hacer cosas cuando el custom element se acaba de crear. En ese momento se ejecutará el código de la función asignada a prototipo.createdCallback. 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.

Si te extraña la línea this.textContent = "Hola Mundo!"; solamente 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: https://github.com/midesweb/web-components-samples/tree/master/01_custom_elements

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Juan_Balbuena_

11/11/2015
Duda
Hola, lo que no entiendo, es por que al prototipo le pasas .createCallback, eso existe o es una forma de extender el prototipo?.
Saludos. Gracias

midesweb

17/11/2015
createcallback
Esta función sirve para registrar acciones cuando el custom element ha terminado de crearse. Existen varios de estos métodos para ejecutar acciones, como si fueran manejadores de eventos, cuando ocurren cosas con los elementos.
Voy a actualizar el artículo para explicarlo un poco mejor.