La gracia de Polymer es que seamos capaces de crear nuestros propios componentes, es decir, lo que serían custom elements para realizar cualquier tipo de tarea que requiera un proyecto.

Este artículo contiene un tutorial básico para crear un Custom Element con Polymer, lo que sería el "Hola Mundo" del desarrollo de componentes Polymer. A lo largo de los próximos minutos podrás crear tu primera etiqueta HTML personalizada capaz de tener un comportamiento elemental, básicamente mostrar un mensaje al usuario.

Por supuesto, los conocimientos que ya tenemos en cuanto a la creación de componentes con Javascript "nativo" (sin usar librerías adicionales) nos servirán para poder entender mejor las piezas del desarrollo de componentes en Polymer. Además, basando nuestro componente en esta librería, reduciremos bastante las necesidades de código fuente para crear nuevos elementos con los que enriquecer la web.

En este caso vamos a crear dos archivos HTML: uno para la definición del custom element y otro para usar el elemento recién creado, a modo de demo. Para nuestro ejemplo vamos a realizar una caja de feedback con la que podremos presentar mensajes a nuestros usuarios.

1.- Creamos el archivo de especificación del componente “dw-feedback.html”

2.- Incluimos las dependencias. En este caso solo voy a depender de la librería general de Polymer, pero como veremos más adelante, unos componentes se pueden crear en base a otros, en cuyo caso habría dependencias no solo con Polymer, sino con otros elementos de la librería.

<link rel="import" href="../bower_components/polymer/polymer.html">

Generalmente esa línea del "import" la tendrás al principio de tu archivo del Custom Element.

3.- Definimos el elemento con . Esa etiqueta, propia de Polymer, mantiene en un mismo bloque todas las partes que queramos agrupar en un custom element: HTML, CSS y Javascript. En esta etiqueta debemos colocar el nombre del elemento que estamos generando en su atributo id.

<dom-module id="dw-feedback">
</dom-module>

Entre esas etiquetas DOM_MODULE colocaremos a continuación todo el código del componente.

4.- Incluimos el Local DOM necesario para implementar el elemento

<dom-module id="dw-feedback">
    <template>
  <p>Hola Mundo</p>
    </template>
</dom-module>

De momento hemos colocado simplemente la etiqueta TEMPLATE con un simple párrafo, será el único elemento en el DOM local. Enseguida mejoraremos eso.

5.- Registramos el elemento con Javascript, para lo que usamos la función Polymer(), indicando un objeto con una serie de parámetros. En este caso solo indicamos el nombre del elemento que queremos registrar "dw-feedback", pero más adelante aprenderemos qué otros parámetros podemos usar a la hora de registrar el componente.

<dom-module id="dw-feedback">
    <template>
    </template>
    <script>
        Polymer({
           is: 'dw-feedback'
        });
    </script>
</dom-module>

Nuestro componente está terminado. Luego lo perfeccionaremos más, pero de momento ya tenemos algo para comenzar. Ahora nos toca usarlo.

6.- Para usar el elemento recién definido creamos otro archivo aparte, donde importaremos el componente. Todos los componentes de Polymer que creemos podremos usarlos las veces que queramos, en cualquier otra página. Para ello simplemente tendremos que asociar el archivo del componente "dw-feedback", haciendo el correspondiente import del archivo de definición del custom element.

<link rel="import" href="dw-feedback.html">

Luego podremos usar el elemento en cualquier lugar del código HTML, con la etiqueta recién definida.

<dw-feedback></dw-feedback>

En este punto podríamos ejecutar la página donde estamos usando el elemento para ver cómo funciona. Deberíamos ver el párrafo definido en la etiqueta TEMPLATE, que recuerda teníamos tal que así.

<template>
    <p>Hola Mundo</p>
</template>

Vamos a incrementar alguna otra utilidad interesante al código de nuestro componente Polymer, ya que tal como lo tenemos la verdad es que no es demasiado impresionante.

Definimos estilos locales al componente

Nuestro custom element dw-feedback se encuentra muy plano, así que vamos a darle un poco de alegría con algo de estilos visuales.. Esto se consigue desde el tag TEMPLATE. Allí colocaremos los estilos CSS con una etiqueta STYLE, generalmente antes de escribir el HTML necesario como DOM local.

Veamos una muestra del código de un Custom Element como el nuestro en el que le hemos agregado los estilos:

<link rel="import" href="../bower_components/polymer/polymer.html">

   <dom-module id="dw-feedback">
    <template>
        <style>
            :host {
                background-color: #de8a0b;
                padding: 5px 10px;
                color: aliceblue;
                font-family: sans-serif;
                display: block;
                border-radius: 6px;
            }
            p{
                font-weight: bold;
            }
        </style>
        <p>
            Hola Mundo
        </p>
    </template>
    <script>
        Polymer({
           is: 'dw-feedback'
        });
    </script>
</dom-module>

Lo interesante de esos estilos es que no salen para afuera del componente. Se limitan solamente a estilizar el DOM local que haya en este custom element.

Todavía no hemos explicado qué significa el :host, pero te adelantamos que es el propio componente que se está usando como host de todo el DOM local declarado en el TEMPLATE. Más adelante lo veremos con calma.

Cargamos un contenido personalizado

Ya que se trata de un sistema para mostrar mensajes, debemos encontrar una manera de que el desarrollador que use este componente pueda personalizar el mensaje que se desea presentar. Esto se puede conseguir de varias maneras, pero una muy cómoda es apoyarnos en el propio contenido de la etiqueta que estamos creando.

<dw-feedback>
    Este es el mensaje personalizado
 </dw-feedback>

Ahora, en la definición del custom element, podemos volcar el contenido de la etiqueta con el tag CONTENT.

<p>
      <content></content>
</p>

Cuando se renderice este elemento en la página, la etiqueta CONTENT se sustituirá con lo que se haya escrito dentro de DW-FEEDBACK.

Como alternativa podríamos acceder a un bloque específico de contenido, usando un selector.

Al usar el custom element definimos el bloque de contenido de alguna manera. Por ejemplo indicando un nombre de class CSS.

<dw-feedback>
   <span class="message">Este es el mensaje personalizado</span>
</dw-feedback>

Luego, en el template del elemento accedemos a ese elemento a través de su selector.

<p>
    <content select=".message"></content>
</p>

En el siguiente código tenemos una versión de nuestro componente dw-feedback en la que usamos esta técnica de cargar contenido definido mediante selector.

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="dw-feedback">
    <template>
        <style>
            :host {
                background-color: #de8a0b;
                padding: 5px 10px;
                color: aliceblue;
                font-family: sans-serif;
                display: block;
                border-radius: 6px;
            }
            p{
                text-align: center;
            }

            b{
                color: #fff614;
            }
        </style>
        <p>
            <b><content select=".messagetype"></content>:</b>
            <content select=".message"></content>
        </p>
    </template>
    <script>
        Polymer({
          is: 'dw-feedback',
        });
    </script>
</dom-module>

Al usar el componente tendremos que colocar los contenidos que se espera situar dentro de la capa del mensaje. Fíjate que en el código de Polymer había dos etiquetas CONTENT, cada una de ellas trae un contenido distinto que se define dentro de la etiqueta DW-FEEDBACK.

<dw-feedback>
   <span class="message">Este es el mensaje personalizado</span>
   <span class="messagetype">Alerta</span>
</dw-feedback>

De momento es todo. Tienes bastantes conocimientos y herramientas para probar unas cuantas cosas con Polymer. Implementaremos nuevas mejoras en este componente más adelante para seguir aprendiendo cosas sobre esta estupenda librería para desarrollo de Web Components.

Videotutorial crear elementos de Polymer

En el siguiente vídeo encuentras estas mismas explicaciones, pero contadas paso a paso en una clase que realizamos en vivo.