Componentes web v1: la nueva generación

Los componentes web están ganando compatibilidad con diferentes navegadores, la comunidad crece a pasos agigantados y cuenta con un catálogo totalmente nuevo de componentes web que te permiten encontrar exactamente el componente que necesitas.

Taylor Savage
Taylor Savage

¿Alguna vez quisiste compilar tu propio componente de JavaScript independiente que puedas usar con facilidad en varios proyectos o compartirlo con otros desarrolladores sin importar el framework de JavaScript que usen? Los componentes web pueden ser para ti.

Los componentes web son un conjunto de funciones nuevas 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, activarse y responder a eventos, e incluso tener un estilo encapsulado y árboles del DOM para aportar su propio aspecto y estilo.

Animación del elemento de progreso en papel.

Cuando proporcionas un modelo de componentes de bajo nivel basado en la plataforma, los componentes web te permiten compilar y compartir elementos reutilizables para todo, desde botones especializados hasta vistas complejas, como selectores de fecha. Dado que los componentes web se compilan con APIs de la plataforma que incluyen primitivas de encapsulamiento potentes, puedes usar estos componentes dentro de otras bibliotecas o frameworks de JavaScript como si fueran elementos estándar del DOM.

Es posible que hayas oído hablar de los componentes web antes, una versión preliminar de la especificación de componentes web (v0) que se envió en Chrome 33.

En la actualidad, gracias a la amplia colaboración entre los proveedores de navegadores, la nueva generación de la especificación de componentes web (v1) está ganando compatibilidad con una amplia compatibilidad. Chrome admite las dos especificaciones principales que componen los componentes web (Shadow DOM y Elementos personalizados) a partir de Chrome 53 y Chrome 54, respectivamente. Safari incluyó compatibilidad con Shadow DOM v1 en Safari 10 y completó la implementación de Custom Elements v1 en WebKit. Actualmente, Firefox está desarrollando Shadow DOM 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 la versión 1, simplemente crea una clase nueva que extienda HTMLElement con la sintaxis de ES6 y regístrala en el navegador:

class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

Las nuevas especificaciones de la versión 1 son sumamente potentes. Recopilamos instructivos sobre el uso de Elementos personalizados v1 y Shadow DOM v1 para ayudarte a comenzar.

webcomponents.org

La comunidad de Web Component también está creciendo a pasos agigantados. Nos complace ver el lanzamiento de un sitio webcomponents.org actualizado, el punto focal de la comunidad de componentes web, que incluye un catálogo integrado para que los desarrolladores compartan sus elementos.

webcomponents.org

El sitio webcomponents.org contiene información sobre las especificaciones de los componentes web, las actualizaciones y el contenido de la comunidad de componentes web, y muestra documentación sobre los elementos de código abierto y las colecciones de elementos que crearon otros desarrolladores.

Puedes comenzar a compilar tu primer elemento con una biblioteca como Polymer de Google o simplemente usar las API de componentes web de bajo nivel directamente. Luego, publica el elemento en webcomponents.org.

¡Que disfrutes de la creación de componentes!