Cómo comenzar a trabajar con Web Components

4min

Ya hemos realizado aproximación teórica a los Web Components o componentes web, el nuevo estándar que está cambiando el paradigma de desarrollo front-end. En esta ocasión, queremos llegar un poco más lejos, ofreciendo algunas guías adicionales para dar los primeros pasos en el uso de Web Components.

Índice

Librerías para desarrollar Web Components

Dado que Web Components es un estándar cada vez más y mejor soportado por los principales navegadores, no es obligatorio contar con una librería adicional para desarrollar tus propios elementos, sino simplemente Javascript convencional. Sin embargo, para el desarrollo acelerado con Web Components existen diversas librerías que nos facilitan mucho la vida.

Las dos más relevantes en estos momentos son Polymer, promovida por Google, y X-Tag, impulsada por la comunidad Mozilla. Polymer está obteniendo gran apoyo por parte del gigante del buscador, que lo usa para el desarrollo de servicios tan destacados como Google Music. Por ello,  supone una excelente plataforma para desembarcar en el mundo de los Web Components, ya que ofrece muchas ventajas para el desarrollo rápido y la interoperabilidad entre los elementos.

Polyfill

Cuando una navegador no soporta una tecnología, siempre podemos echar mano de un polyfill. Es decir, un parche que permite usar características de navegadores nuevos en navegadores antiguos. En este caso, existe una librería Javascript para dar soporte a los navegadores que aún no han implementado el estándar de los Web Components.  Actualmente, la tecnología tiene soporte nativo total en Chrome y en Opera, sin embargo los demás navegadores solo la soportan parcialmente.

El polyfill para los Web Components lo encontramos en Github. Originalmente formaba parte de Polymer, sin embargo hoy es un proyecto independiente que podemos usar para el desarrollo nativo o para el desarrollo con otra librería. Lo encuentras en esta dirección:

https://github.com/WebComponents/webcomponentsjs

Para usarlo simplemente tenemos que colocar el

Copyright © Arsys |
|
An IONOS company