¿Qué es un webcomponent?

• lo presenta un ingeniero de Google, Alex Russell
• permite crear nuevas etiquetas HTML
• permite encapsular js y css
• tenemos componentes, ¡independientes de frameworks!

Las especificaciones que ocupa

• Custom Elements: Describe el método para permitir a los desarrolladores definir y usar nuevos tipos de elementos del DOM en un documento HTML.

• HTML Templates: Te permite definir fragmentos de HTML que pueden ser clonados o insertados en un documento.

• Shadow DOM: Esta especificación determina cómo tener múltiples árboles de elementos en una sola jerarquía, cómo estos árboles interactúan entre ellos siendo independientes y permitiendo una mejor composición.

Las especificaciones que ocupa

• ES Modules : Es el estándar de ECMAScript para importar módulos Javascript. Permite tanto la carga síncrona como asíncrona de los mismos, los puede analizar estáticamente y, por lo tanto, nos ofrecerá una carga más óptima de nuestras dependencias.

• HTML Imports: Era una forma de importar documentos HTML en otros documentos HTML. Digo era ya que es una característica abandonada. Hay un interesante debate sobre empezar de cero una nueva característica llamada HTML Modules, siguiendo la filosofía de los ES Modules de Javascript.

Mucho blabla, ¿y si mejor creamos uno?

Librerias que nos facilitaran la vida

• Polymer
• LitElement
• Stencil

Mmmm se ve bueno pero, ¿Cual es el soporte que tienen?

• *Con polyfills podemos llegar a aproximadamente un 90% de soporte a navegadores

Ya pero yo tengo mis desarollos en [inserte libreria de moda aquí], ¿puedo usar webcomponents?

• Sí la mayoria de los frameworks mas ultilizados tienen un 100% de compatibilidad con webcomponents, esto se puede ver en https://custom-elements-everywhere.com/, bueno exceptuando por unos pocos como React :(

Gracias por su atención