Polymer es una librería de desarrollo web basada en los estándares de los Web Components, que hace muy sencilla la construcción de elementos encapsulados e interoperables.
Nos proporciona una sintaxis declarativa que hace más sencilla la definición de los custom elements. Y añade características como templating, data binding y observación de propiedades para ayudar a construir elementos con menos código.
Ahora vamos a explicar cómo crear nuestro primer custom element con Polymer.
Registrar un elemento
Para registrar un nuevo elemento, llamamos a la función Polymer, que registra un nuevo elemento con el navegador.
Registrar un elemento asocia un nombre de etiqueta con un prototipo, así que podremos añadir propiedades y métodos al custom element. El nombre del custom element debe contener un guión (-).
La función Polymer tiene como argumento un objeto que define el prototipo del elemento.
my-element.html
index.html
Este ejemplo utiliza un lifecycle callback para agregar contenidos al <mi-elemento> cuando es inicializado. Cuando un custom element finaliza su inicialización, el lifecycle callback ready es llamado. El callback ready es un buen sitio para hacer el trabajo de un constructor.
Añadir local DOM
Muchos elementos incluyen algunos nodos del DOM internos para implementar la interfaz y el comportamiento de éstos. Polymer llama local DOM a esto, y proporciona una manera fácil para especificarlo:
my-element.html
index.html
El local DOM se encapsula dentro del elemento.
Componer con local DOM
El local DOM permite controlar la composición. Los hijos de los elementos se renderizan como si se insertaran en el local DOM.
Este ejemplo crea un elemento que decorará una imagen, envolviéndola con una etiqueta <div> estilizada.
my-element.html
index.html
Nota: Los estilos CSS definidos dentro del <dom-module> están encapsulados al local DOM del elemento. Entonces, la regla del div solo afecta a la etiqueta <div> dentro de <mi-elemento>.
Utilizar el data binding
Por supuesto, tener el local DOM estático no es suficiente. Queremos actualizarlo dinámicamente.
El data binding es una buena manera de propagar rápidamente cambios en un elemento y reducir código repetitivo. Podemos enlazar propiedades en los elementos utilizando la sintáxis "double-mustache" ({{}}). El {{}} se sustituye por el valor de la propiedad referenciada entre los corchetes.
my-element.html
index.html
Declarar propiedades
Las propiedades son una parte importante de la API pública de un elemento. Polymer declara propiedades para apoyar una serie de patrones comunes de propiedades — configurar valores por defecto, observar cambios sobre una propiedad, etc.
En el siguiente ejemplo, declaramos una propiedad “owner” con un valor por defecto, configurable desde el index.html.
my-element.html
index.html
Esto ha sido una aproximación muy básica de cómo funciona Polymer. Si tenéis cualquier duda o si queréis artículos más completos, no dudéis en contactarme @abdonrd.
Para cerrar, recomiendo tanto la documentación oficial como los Polycasts que protagoniza Rob Dodson, una serie de vídeos breves en los que va explicando las funcionalidades de Polymer.