En este artículo vamos a ver un sencillo ejemplo que nos permita explorar otra de las prestaciones de los Web Components. Se basa simplemente en la posibilidad de crear unos componentes en base a otros. Para ello usaremos las técnicas de creación de Custom Elements ya relatadas en el artículo anterior, agregando nuevo conocimiento práctico.

Es algo parecido a lo que conocemos como herencia en la Programación Orientada a Objetos, que nos permite extender las clases apoyándonos en el código de otras clases padre. En el mundo de los elementos de una web, nos permitirá construir nuevos elementos que son especializaciones de elementos que ya existen anteriormente.

Soporte actual en los navegadores a la extensión mediante "is"

ACTUALIZACIÓN: Este artículo explica una modalidad de desarrollo de componentes que no ha llegado a establecerse definitivamente en el estándar de Web Components, debido principalmente a la oposición de Apple.

Ofrece el desarrollo de un estilo de "Custom Elements" llamada "Customized Built-In Elements" que no te recomendamos, porque no está disponible en todas las plataformas y probablemente ya no funcione en el momento de realizar esta actualización. Por tanto, es mucho mejor desarrollarlos mediante la creación de clases, como se explicó en el artículo anterior o en los siguientes artículos de este manual.

Por tanto, te recomendamos saltar este artículo y aprender a realizar los llamados "Autonomous Custom Element" (los basados en clases, usando etiquetas nuevas con nombres inventados por ti mismo), que son los componentes que se pueden usar de manera autónoma, sin extender una etiqueta nativa como un botón. Quizás más adelante retomen esta propuesta y permitan exender etiquetas nativas, pero va a depender de si finalmente se apoya o no esta modalidad de creación de componentes.

Extender Custom Elements

Creemos que el concepto de extensión se debe entender, pero queremos insistir en ello porque es una de las principales filosofías de trabajo que nos traen los Web Components. Básicamente, este estándar se ha creado de manera que permita que los desarrolladores extiendan el HTML, creando aquellos nuevos elementos esenciales para realizar su tarea.

Esa capacidad de extensión no solo se da con elementos que existan actualmente en el HTML, sino también con otros custom elements. Es algo que vemos continuamente en todos los ámbitos.

En un coche tenemos varios elementos, ruedas, motor, suspensión y éstos a su vez están formados de otros elementos: por ejemplo el motor a base de un cilindros, pistones, bielas, cigueñal, etc. En el mundo del lenguaje de las personas tenemos las letras y éstas forman palabras y las palabras forman frases, etc.

En el mundo de la web podemos tener sistemas compuestos de varios elementos, como un cuadro de búsqueda, que está hecho de un botón y un campo de texto. Para construir una web podré usar botones y campos de texto, pero si lo que quiero hacer es un campo de búsqueda, usaré directamente el componente de búsqueda. Este componente funciona exactamente igual que si fuera un elemento suelto, es decir, tiene un nuevo tag (etiqueta) que usaré para insertarlo en una página. Por tanto, su complejidad y los componentes internos que necesite para representarse, quedarán encapsulados y protegidos del exterior.

Adicionalmente a crear unos componentes en base a la reunión de otros componentes, también podemos extender componentes ya creados, para dotarles de un comportamiento diferente de los componentes padre. Sobre este punto vamos a crear un ejemplo.

Ejemplo de elemento que extiende otro elemento

En el momento en el que nos encontramos todavía es un poco pronto para hacer un ejemplo complejo, con el que podamos representar la capacidad de los Web Components, de asociarse unos con otros para crear elementos sofisticados. Para hacer todo esto necesitamos hablar antes de otras especificaciones de las 4 disponibles en este estándar. Así que nos vamos a conformar por ahora de hacer un elemento que extienda a otro.

Crearemos un tipo de botón nuevo, que especializa los botones que existen en el lenguaje HTML común. Nuestro botón se llama "botonholamundo". No hemos sido demasiado originales. Su comportamiento es tan básico como representarse con un texto ya definido (escrito dentro del botón) "Hola Mundo!".

Usando el botón:
Para empezar vamos a ver cómo usaríamos este custom element, porque difiere un poco del ejemplo del artículo anterior.

<!-- Uso mi Web Component -->
<button is="dw-botonholamundo"></button>

Como puedes ver, ahora no estoy creando una nueva etiqueta personalizada, sino una especialización de una etiqueta ya existente.

La etiqueta sobre la que he partido como base es BUTTON y le hemos colocado el atributo is="dw-botonholamundo" para indicar que no es un botón normal, sino uno que lo extiende y especializa.

Creando el custom element:
Ahora vamos a ver cómo creamos el Javascript para generar ese elemento especializado. Realmente cambian pocas cosas a lo que ya conoces de los custom elements.

Para comenzar, al crear el prototipo no vamos a partir del prototipo genérico de elemento HTML, sino del prototipo de un elemento HTML botón: HTMLButtonElement.prototype.

var prototipo = Object.create(HTMLButtonElement.prototype);

Ahora asignamos un pequeño comportamiento a este botón, que especializa el botón genérico del HTML. Realmente solo le estamos cambiando el texto.

prototipo.createdCallback = function() {
	this.textContent = "Hola Mundo botón!";
};

A la hora de registrar el componente hay otro detalle fundamental para crear estos elementos que extienden otros y es el uso del atributo "extends" al que le hemos colocado el valor del elemento que está extendiendo: "button".

document.registerElement('dw-botonholamundo', {
	prototype: prototipo,
	extends: 'button'
});

Con eso es todo! Ya tenemos nuestro "dw-botonholamundo" listo, un botón que especializa y extiende los botones básicos que existen en el HTML tradicional.

El código del ejemplo completo lo puedes encontrar en Github https://github.com/midesweb/web-components-samples/blob/master/01_custom_elements/holamundo3.html

Esperamos que te haya gustado, prueba a extender otros elementos y hacer tus propios experimentos. Nosotros para seguir avanzando vamos a aprender en el siguiente artículo otra de las especificaciones de los Web Components como es el sistema de templates.