En el Manual de Web Components hemos abordado diversas especificaciones del estándar que nos han mostrado por separado las posibilidades de este nuevo modelo de desarrollo Javascript. Pero la verdad es que estas tecnologías cobran más sentido si se usan en conjunto, así que vamos a juntarlo todo para experimentar el estándar de la mejor manera.

Usaremos únicamente Javascript estándar, sin apoyarnos en ninguna librería adicional, lo que se conoce como VanillaJS. Estos ejemplos funcionarán en cualquier navegador, siempre que incluyas el Polyfill, sin embargo, lo mejor es que los veas en Chrome que es cliente web que más camino andado tiene para implementar la tecnología.

Custom Element 'feedback-message'

Nuestro ejercicio consiste en crear un compoente que muestre un mensaje de feedback con un formato más atractivo estéticamente, que lo que sería un párrafo normal. Algo sencillo para comenzar, pero que nos permite trabajar con las 4 especificaciones:

• Custom Elements
• Templates
• Shadow DOM
• HTML Import

La etiqueta nueva que vamos a crear se llamará feedback-message. Realmente solo presenta un mensaje con un estilo especial, que podríamos haber conseguido con una simple clase de CSS, no obstante como práctica es interesante.

Lo usaremos de esta manera:

<feedback-message color="gray">Bienvenidos al Taller de Web Components!!</feedback-message>

Comenzamos con el archivo del componente. En un único archivo reunimos todo el HTML y el Javascript necesario para crear un elemento personalizado. Despiezamos sus dos partes principales:

• El template: donde colocas todo el HTML local que va a tener este componente. Ese template a menudo estará vacío de contenido y se cargará con Javascript en tiempo de ejecución. Es nuestro caso. Verás que el template tienen un único párrafo y está vacío. El contenido lo sacaremos del mismo documento HTML, lo que hay dentro de la etiqueta del custom element.
• El script: que registrará el componente y le dará su comportamiento especial. En ese script nos encargamos de hacer diversas tareas laboriosas y de código un tanto largo. Pero en realidad son pequeñas y simples acciones que están comentadas perfectamente.

<template>
    <style>
        p{
            background-color: azure;
            font-family: trebuchet ms, tahoma, verdana, arial, sans-serif;
            padding: 10px;
        }
    </style>
    <p></p>
</template>
<script>
    // Creamos el prototipo de nuestro nuevo elemento 
    // basándonos en el prototipo del elemento html genérico
    var prototipo = Object.create(HTMLElement.prototype);

    //Accedo al template definido antes
    var templateContent = document._currentScript.ownerDocument.querySelector('template').content;
    
    // definimos un callback a ejecutar al crear el elemento
    prototipo.createdCallback = function() {

        // guardo el contenido del elemento y luego lo borro
        var elementContent = this.innerHTML;
        this.innerHTML = "";

        // clono el template
        var clone = document.importNode(templateContent, true);

        // accedo al párrago de ese clon del template
        var parrafo = clone.querySelector("p");

        // cambio el contenido de ese párrafo con el contenido del elemento
        parrafo.innerHTML = elementContent;

        // si tiene el atributo color, lo coloco como estilo del párrafo
        if(this.hasAttribute("color")){
            var color = this.getAttribute('color');
            parrafo.style.color = color;
        }

        // Añado el clon del template como shadow dom
        this.createShadowRoot().appendChild(clone);

    };

    //Registro el componente con el nombre "feedback-message"
    document.registerElement('feedback-message', {
        prototype: prototipo
    });
</script>

Usar este componente

Ahora para usar este componente necesitamos hacer dos cosas:

1. El import del código del componente, que deberás poner en cada página que necesite usarlo
2. Colocar la etiqueta nueva que has creado

Además opcionalmente podrías usar el Polyfill de Web Components, que nos permitirá usarlo en todos los navegadores modernos.

<!DOCTYPE html>
<html lang="ee">
<head>
	<meta charset="UTF-8">
	<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
	<link rel="import" href="feedback-message-comp.html">
	<title>Mensaje de Feedback con Web Components y VanillaJS</title>
</head>
<body>
	<h1>Un mensaje de Feedbak</h1>
	<p>Debajo de este párrafo aparece el mensaje de Feedback generado con un custom element.</p>

	<!-- Uso mi Web Component -->
	<feedback-message color="gray">Bienvenidos al Taller de Web Components!!</feedback-message>
</body>
</html>

El import lo colocas generalmente en la cabecera, con el href hacia la ruta donde se encuentra el código del componente.

Otra cosa que encuentras en el HEAD es el Javascript que carga el polyfill de compatibilidad webcomponents.js.

El uso del componente lo tienes más abajo, en la etiqueta nueva que hemos creado al registrar el componente.

Al ejecutarlo deberías ver el mensaje de feedback con un color de fondo azul y el texto de color gris. Podrías cambiar el color del texto simplemente cambiando el valor del atributo "color".

<feedback-message color="purple">Este es otro mensaje de feedback</feedback-message>