Nativos Vanilla WebComponents con Custom Elements v1 in E6

Los webcomponents son la base de los ultimos frameworks aparecidos como Angular 2 o 4, Polymer, Aurelia, X-tag e incluso React tiene una aire.

Todos hacen lo mismo encapsulan html modularmente y bindean objetos de datos.

Vanilla ES6 permite escribir web compoents NATIVOS, esto quiere decir mas rapidos en ejecucion y mas entendibles pq no hay magia. Por contra habra que hacer un poquito mas de codigo para el binding de datos pero con ES6 las arrows y typescript tampoco es que sea muy dificil.

Como son NATIVOS se pueden incorporar en todos los frameworks, y como son NATIVOS van a durar mucho mas que no los frameworks q tienen un ciclo de vida de 2 añitos.Y nos olvidaremos de migraciones

Para los navegadores que no soportan WC nativos ya hay polyfills. Es mas todos los frameworks anteriores o incorporan el mismo polyfill o lo has de poner.

La especificación de webcomponents y en concreto los Custom Elements se puede ver en los enlaces de abajo

https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elementss

y un fantastico enlace en castellano

https://developers.google.com/web/fundamentals/getting-started/primers/customelements

Los custom elements llevan el gion normalmentepor ejemplo <my-app></my-app>. Eso es parte de la especificacion.

Lo basico es crear una clase que extienda de HtmlElement o del element que sea HtmlButton... y implementar algunas de las funciones para interctuar con el DOM.

Para poner atributtos en el htmlelement se deben de declarar con get y set.

get attributename()
set attributename()

Si ademas queremos que esos atribures notifiquen a nuestra clase cuando se cambian hay que declarar el array

static get observableattributes y despues el metodo attributeChangedCallback

Mi personal test con custom elelments v1 que incluye dos custom tags y con sus porpios eventos

https://github.com/jordiesc/webcomponents