Componentes web v1: la nueva generación

Los componentes web están adquiriendo compatibilidad entre navegadores, la comunidad está creciendo a pasos agigantados, y existe un catálogo de componentes web totalmente nuevo que permite encontrar exactamente los componentes que necesitas.

Taylor Savage
Taylor Savage

¿Alguna vez quisiste crear tu propio componente de JavaScript independiente, en el que puedas utilizar fácilmente en múltiples proyectos o compartir con otros desarrolladores, independientemente de y qué framework de JavaScript usan? 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 tienen todos los beneficios de los elementos integrados: elementos personalizados. pueden tener propiedades y métodos, activar y responder a eventos, e incluso estilo y árboles de DOM encapsulados para aportar su propio estilo.

Animación del elemento de progreso del papel.

Con un modelo de componentes de bajo nivel basado en la plataforma, los componentes web te permiten crea y comparte elementos reutilizables para todo, desde botones especializados hasta vistas complejas, como selectores de fecha. Debido a que los componentes web se crean con la plataforma que incluyen potentes primitivas de encapsulamiento, incluso puedes usar dentro de otras bibliotecas de JavaScript o frameworks elementos de DOM estándares.

Quizás ya hayas oído hablar de los componentes web, una de las primeras versiones de la Web. Especificación de los componentes - v0 - se envió en Chrome 33.

Hoy, gracias a la amplia colaboración entre proveedores de navegadores, la nueva generación de las especificaciones de componentes web, la v1, está ganando compatibilidad. Chrome admite las dos especificaciones principales que componen los componentes web: Shadow. DOM y Personalizado Elements - a partir de Chrome 53 Chrome 54 respectivamente. Safari envió compatibilidad con Shadow DOM v1 en Safari 10 y completó implementación de Custom Elements v1 en WebKit. Firefox es en desarrollo en la actualidad Shadow DOM y Personalizado Elements v1 y ambos Sombra DOM y Personalizada Elements que están en la hoja de ruta de Edge.

Para definir un nuevo elemento personalizado con la implementación v1, simplemente crea un una nueva clase que extiende HTMLElement con la sintaxis ES6 y lo registra con el navegador:

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

Las nuevas especificaciones de la versión 1 son muy potentes. Reunimos tutoriales sobre el uso de Elementos personalizados v1 y Shadow DOM v1 para ayudarte antes de empezar.

webcomponents.org

La comunidad de componentes web también está creciendo a pasos agigantados. Nos entusiasma para ver el lanzamiento de una actualización sitio webcomponents.org, el punto central de la comunidad de componentes web, incluido un catálogo integrado para que los desarrolladores compartan sus elementos.

webcomponents.org

El sitio webcomponents.org contiene información sobre los componentes web especificaciones, actualizaciones y contenido de la Web la comunidad de componentes y muestra documentación para sistemas de código abierto elementos y colecciones de elementos creadas por otros desarrolladores.

Puedes comenzar a crear tu primer elemento con una biblioteca como la de Google Polymer o simplemente usa la Web de bajo nivel directamente las APIs de componentes. Luego, publica tu elemento en webcomponents.org.

¡Que disfrutes de la creación de componentes!