Estudio de Polymer.js

• Componentes web personalizados
• Enlace de datos bidireccional
• Soporte para Shadow DOM y Custom Elements

• Bibliotecas de componentes reutilizables
• Apps basadas en componentes
• Alta personalización

Instalación: npm i @polymer/polymer

// PolymerElement legacy — prefiere Lit o Web Components nativos hoy

1. Custom element simple

Elemento web con una propiedad.

// Legacy Polymer 3
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MiEtiqueta extends PolymerElement {
  static get template() { return html`<b>[[texto]]</b>`; }
  static get properties() { return { texto: String }; }
}
customElements.define('mi-etiqueta', MiEtiqueta);
// <mi-etiqueta texto="Hola"></mi-etiqueta>

2. Eventos en el elemento

Escucha un clic dentro del template.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MiBoton extends PolymerElement {
  static get template() { return html`<button on-click="alHacer">[[etiqueta]]</button>`; }
  alHacer() { console.log('click!'); }
}
customElements.define('mi-boton', MiBoton);