Los componentes web están ganando compatibilidad con varios navegadores, la comunidad crece a pasos agigantados y hay un nuevo catálogo de componentes web para encontrar exactamente el componente que necesitas.
¿Alguna vez quisiste compilar tu propio componente de JavaScript independiente que puedas usar fácilmente en varios proyectos o compartir con otros desarrolladores, independientemente del framework de JavaScript que usen? Los componentes web pueden ser adecuados para ti.
Los componentes web son un conjunto de nuevas funciones de la plataforma web que te permiten crear tus propios elementos HTML. Cada elemento personalizado nuevo puede tener una etiqueta personalizada como <my-button> y tener todas las ventajas de los elementos integrados. Los elementos personalizados pueden tener propiedades y métodos, activar y responder a eventos, y hasta tener un estilo encapsulado y árboles de DOM para llevar su propio aspecto.
Los componentes web proporcionan un modelo de componentes de bajo nivel basado en la plataforma que te permite compilar y compartir elementos reutilizables para todo, desde botones especializados hasta vistas complejas, como selectores de fecha. Debido a que los componentes web se compilan con APIs de la plataforma que incluyen primitivas de encapsulamiento potentes, incluso puedes usar estos componentes dentro de otras bibliotecas o frameworks de JavaScript como si fueran elementos DOM estándar.
Es posible que ya hayas escuchado hablar de Web Components. Una versión preliminar de la especificación de Web Components, v0, se incluyó en Chrome 33.
Hoy en día, gracias a la amplia colaboración entre los proveedores de navegadores, la especificación de nueva generación de Web Components, la v1, está ganando una amplia compatibilidad. Chrome admite las dos especificaciones principales que conforman Web Components: Shadow DOM y Custom Elements, a partir de Chrome 53 y Chrome 54, respectivamente. Safari envió compatibilidad con Shadow DOM v1 en Safari 10 y completó la implementación de Custom Elements v1 en WebKit. Actualmente, Firefox está desarrollando DOM sombreado y Elementos personalizados v1, y ambos están en la hoja de ruta de Edge.
Para definir un nuevo elemento personalizado con la implementación de v1, simplemente crea una clase nueva que extienda HTMLElement con la sintaxis ES6 y regístrala con el navegador:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Las nuevas especificaciones de la versión 1 son muy potentes. Elaboramos instructivos sobre el uso de los elementos personalizados v1 y el Shadow DOM v1 para ayudarte a comenzar.
webcomponents.org
La comunidad de componentes web también está creciendo a pasos agigantados. Nos complace ver el lanzamiento de un sitio actualizado de webcomponents.org, el punto focal de la comunidad de componentes web, que incluye un catálogo integrado para que los desarrolladores compartan sus elementos.
El sitio webcomponents.org contiene información sobre las specs de Web Components, actualizaciones y contenido de la comunidad de componentes web, y muestra documentación para elementos de código abierto y colecciones de elementos creados por otros desarrolladores.
Puedes comenzar a compilar tu primer elemento con una biblioteca como Polymer de Google o simplemente usar directamente las APIs de componentes web de bajo nivel. Luego, publica tu elemento en webcomponents.org.
¡Feliz creación de componentes!