Ejemplos de custom elements sencillos y cómo usar la declaración import para incluirlos en una página web, de modo que se puedan usar.
Este artículo va a presentar un par de ejemplos sencillos de Web Components, muy elementales, que nos permitan asimilar un poco más las nuevas API para trabajo con este nuevo estándar desde Javascript.
En el artículo anterior presentamos la especificación import, pero lo que vimos es algo casi anecdótico, porque realmente un import no sirve para traerse el contenido HTML de un archivo externo, sino más bien para importar el código de nuevos componentes que podrías usar en cualquier documento HTML.
En esta ocasión mostraremos un uso más razonable de import, el de traerse el código de dos custom element creados para la ocasión. En resumen, usaremos las especificaciones:
Componente dw-date
Este componente simplemente muestra la fecha y hora del instante actual en la página. Se usa así:
<dw-date></dw-date>Como comportamiento del componente, alí donde aparezca, se sustituirá por la fecha actual. Algo así como:
Mon Mar 28 2016 20:46:13 GMT-0300
El código del componente tiene esta forma: (con los comentarios y las explicaciones anteriores del Manual de Web Components estamos seguros que podrás entenderlo)
<script>
//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() {
//cambio el texto que hay en este elemento
this.textContent = new Date().toString();
};
//Registro el componente "dw-date"
document.registerElement('dw-date', {
prototype: prototipo
});
</script>Componente romper-cadena
Ahora vamos a ver un segundo ejemplo de Web Component sencillo, pero esta vez un poco más útil. Este elemento permite romper un texto en una longitud en caracteres dada, pero sin romper las palabras.
El texto de la cadena original será el propio texto que haya en el elemento y además tendrá un atributo llamado "len" donde se marcará esa longitud máxima de caracteres para el recorte. Si no es posible romper en esa longitud, porque se rompa una palabra, se entrega la cadena hasta el espacio en blanco anterior.
Lo usaremos de esta forma:
<romper-cadena len="30">Esta cadena se va a romper en la longitud de 30 caracteres o menos</romper-cadena>Ahora veamos el código de nuestro elemento.
<script>
(function() {
function recortar(cadena, len) {
if (cadena.length <= len) {
return cadena;
}
var recortada = cadena.substr(0, len);
return recortada.substr(0, Math.min(recortada.length, recortada.lastIndexOf(' '))) + '...';
}
//prototipo de elemento, a partir del elemento base
var prototipo = Object.create(HTMLElement.prototype);
//cuando se cree el elemento
prototipo.createdCallback = function() {
// guardo el contenido del elemento
var cadena = this.textContent;
//guardo la longitudo deseada
var len = this.getAttribute('len');
//lo recorto
cadena = recortar(cadena, len);
//cambio el texto que hay en este elemento
this.textContent = cadena;
};
//Registro el componente "dw-date"
document.registerElement('romper-cadena', {
prototype: prototipo
});
})();
</script>Nota: en este elemento hemos realizado la envoltura del código mediante una función, ya que tiene sentido para encapsular la función Javascript usada "recortar()", así evitamos que su nombre colisione con el de otra función creada por aquella persona que use este componente. Ese patron se llama IIFE o closure.
Import: Usar estos componentes en una página
Ahora llega la parte de los import. Si quieres usar esos componentes en una página los tendrás que importar. El sistema es bien simple, gracias a la etiqueta IMPORT. Podrás ver el demo completo de estas dos etiquetas en este código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Importar un webcomponent</title>
<link rel="import" href="date.comp.html">
<link rel="import" href="romper-cadena.comp.html">
</head>
<body>
<dw-date></dw-date>
<br>
<romper-cadena len="30">Esta cadena se va a romper en la longitud de 30 caracteres o menos</romper-cadena>
<br>
<romper-cadena len="15">Este elemento me sirve para muchas cosas</romper-cadena>
</body>
</html>Como puedes comprobar, después de los correspondientes import, somos capaces de usar las nuevas etiquetas creadas al registrar los componentes.
Recuerda que es una tecnología estándar, por lo que no necesitas una librería adicional Javascript para que funcione. Sin embargo, si queremos compatibilidad con navegadores que aún no implementan este estándar, lo ideal es usar el Polyfill, agregando el script en tu HEAD de webcomponents.js. Lo puedes hacer directamente desde el CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>Esperamos que estos ejemplos te sirvan para seguir avanzando en el aprendizaje de Web Components, ilustrando con nuevos ejemplos la práctica con esta tecnología. Es interesante ver las cosas que se pueden conseguir con los custom elements más sencillos y cómo somos capaces de usarlos en una página web cualquiera.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...