Un ejemplo de creación de componentes Polymer

Una de las opciones más interesantes de Polymer es extender el HTML con nuevos componentes que podremos usar en nuestros proyectos para solucionar las necesidades básicas que se nos planteen. Estos componentes son muy sencillos de realizar y gracias a Polymer existen muchas facilidades adicionales que nos permitirán desarrollarlos más rápido. Al final, lo que tendremos es una nueva etiqueta HTML que podremos usar para realizar diferentes acciones en la web, desde las más elementales hasta las más complejas.

Partes de un componente Polymer

Un componente Polymer tiene dos partes fundamentales que tenemos que definir durante su creación:

• Template: Es el HTML o DOM local que tendrá un componente. Contendrá todos los elementos que se verán en la página cuando usemos ese componente. Puede ser una sola etiqueta o un conjunto de ellas y habitualmente también contendrá un CSS para personalizar su aspecto. Esta parte es opcional, puesto que podría haber componentes que no tienen representación alguna dentro de la página web.
• Script: Es el script Javascript necesario para darle funcionalidad. Como mínimo en la parte del script tendremos lo que se llama el registro del componente.

Profundizamos en ambas partes a continuación.

Un componente básico Polymer

Ahora vamos a ver cuál sería el código mínimo necesario para la creación de un componente Polymer. Este listado encontrarás que tiene algunas cosas adicionales a las partes del componente señaladas en el anterior punto, pero en seguida las explicamos.

<!-- Importar polymer -->
<link rel='import' href='bower_components/polymer/polymer.html'>

<!-- Definir el componente -->
<dom-module id='mi-elemento'>
 <template>
 <p>DOM local</p>
 </template>
 
 <script>
 Polymer({
 is: 'mi-elemento',
 });
 </script>
</dom-module>

Como ves, en el listado comenzamos con la etiqueta . Esto es para traernos todas las dependencias del componente, es decir, todos los elementos personalizados en los que nos hemos basado para el desarrollo. En este caso, simplemente traemos la librería Polymer. Esa librería la tendrás que haber descargado, algo que realizas con Bower y ya comentados cuando hablamos de los elementos de Polymer.

Luego encuentras una etiqueta . Esta etiqueta engloba todo lo que es nuestro componente, las dos partes que habíamos mencionado anteriormente. El único detalle es que tenemos que colocar a un atributo id con el nombre del componente. Es importante que los nombres de los componentes tengan al menos un guión (–), para distinguirlos de etiquetas HTML.

Luego tenemos el