Web Components

Conceptos y uso

Como desarrolladores, sabemos que reutilizar cdigo tanto como sea posible es una buena idea. Esto tradicionalmente no es sencillo para estructuras de marcado personalizadas piense en el complejo HTML (y sus estilos y scripts asociados) que en ocasiones se han tenido que escribir para renderizar controles de interfaz (UI) personalizados, y ahora usarlos mltiples veces puede crear un caos en la pgina si no se es cuidadoso.

Los Componentes Web apuntan a resolver dichos problemas consiste en tres tecnologas principalmente, las que se pueden usar juntas para crear elementos personalizables verstiles que encapsulan la funcionalidad y pueda ser reutilizada donde sea sin miedo a colisiones de cdigo.

• Custom elements (elementos personalizados): Un conjunto de APIs de JavaScript que permiten definir elementos personalizados y su comportamiento, que entonces puede ser utilizado como se dese en la interfaz del usuario.
• Shadow DOM: Un conjunto de APIs de JavaScript para fijar un rbol DOM "sombra" encapsulado a un elemento que es renderizado por separado del documento DOM principal y controlando funcionalidad asociada. De esta forma, se pueden mantener caractersticas de un elemento en privado, as puede tener el estilo y los scripts sin miedo de colisiones con otras partes del documento.
• HTML templates (plantillas HTML): Los elementos <template> y <slot> permiten escribir plantillas de marcado que no son desplegadas en la pgina renderizada. stas pueden ser reutilizadas en mltiples ocasiones como base de la estructura de un elemento personalizado.

La aproximacin bsica para implementar un componente web, generalmente es la siguiente:

1. Crear una clase o funcin en la cual especificar la funcionalidad del componente web. Si se usa una clase, usar la sintaxis de ES2015 (ver Clases para ms informacin).
2. Registrar el nuevo elemento personalizado utilizando el mtodo CustomElementRegistry.define(), pasndole el nombre del elemento a ser definido, la clase o funcin en la cul su funcionalidad esta especificada, y opcionalmente, de que elemento hereda.
3. Si se requiere, adjuntar un shadow DOM al elemento personalizado usando el mtodo Element.attachShadow(). Aadir elementos hijos, oyentes de eventos, etc., al shadow DOM utilizando mtodos normales del DOM.
4. Si se requiere, definir una plantilla HTML utilizando <template> y <slot>. Nuevamente usar mtodos regulares del DOM para clonar la plantilla y acoplarla al shadow DOM.
5. Utilizar los componentes personalizados en la pgina web cuando se desee, como se utilizara cualquier otro elemento HTML.

Tutoriales

Utilizando elementos personalizados (Using custom elements)

Gua que muestra como usar las caractersticas de los elementos personalizados para crear componentes web sencillos, as como revisar las llamadas del ciclo de vida y algunas caractersticas ms avanzadas.

Utilizando el shadow DOM

Gua que trata los fundamentos del shadow DOM, mostrando como adjuntar un shadow DOM a un elemento, aadir el rbol del shadow DOM, aadirle estilos y ms.

Usando templates y slots

Gua que muestra como definir una estructura HTML reutilizable utilizando elementos <template> y <slot> elements, y entonces usar esa estructura debto del componente web.

Referencia

Elementos personalizados

CustomElementRegistry

Contiene funcionalidad relacionada a los elementos personalizados, ms notablemente el mtodo CustomElementRegistry.define() utilizado para registrar nuevos elementos personalizados para que se puedan usar en el documento

Window.customElements

Retorna una referencia al objeto CustomElementRegistry.

Llamadas del ciclo de vida (Life cycle callbacks)

Llamadas de funciones especiales declaradas dentro de la clase de definicin de los componentes personalizados, los que afectan su comportamiento:

• connectedCallback: Invocado cuando el componente personalizado se conecta por primera vez al DOM del documento.
• disconnectedCallback: Invocado cuando el componente personalizado se deconecta del DOM del documento.
• adoptedCallback: Invocado cuando el componente personalizado se mueve a un nuevo documento.
• attributeChangedCallback: Invocado cuando uno de los atributos del componente personalizado es aadido, removido o modificado.

Extensiones para crear elementos incorporados personalizados

• El atributo global HTML is: Permite especificar que un elemento estandar HTML debe comportarse como un elemento incorporado personalizado registrado.
• La opcin "is" del mtodo Document.createElement(): Permite crear una instancia de un elemento HTML estandar que se comporta como un determinado elemento incorporado personalizado registrado.

Pseudo-clases CSS

Pseudo-clases relacionadas especficamente a elementos personalizados:

• :defined: Coincide con cualquier elemento declarado, incluyendo elementos incorporados y elementos personalizados definidos con CustomElementRegistry.define()).
• :host: Selecciona el shadow host del shadow DOM conteniendo el CSS que es usado.
• :host(): Selecciona el shadow host del shadow DOM conteniendo el CSS que es usado (para que se pueda seleccionar un elemento personalizado desde dentro de su shadow DOM) pero solo si el selector determinado como el parmetro de la funcin coincide con el shadow host.
• :host-context(): Selecciona el shadow host del shadow DOM conteniendo el CSS que es usado (para que se pueda seleccionar un elemento personalizado desde dentro de su shadow DOM) pero solo si el selector determinado como el parmetro de la funcin coincide con el shadow host de los ancestros del sitio desde el cual esta ubicado en la jerarqua del DOM.

Pseudo-elementos CSS

Pseudo-elementos relacionados especificamente a elementos personalizados:

• ::part: Representa cualquier elemento dentro del shadow tree que contiene un atributo part que coincida.

Shadow DOM

ShadowRoot

Representa el nodo raz de un subrbol de un shadow DOM.

DocumentOrShadowRoot

Un mixin definiendo caractersticas que son disponibles a travs de documentos y shadow roots.

Extensiones a Element

Extensiones a la interfaz Element relacionada al shadow DOM:

• El mtodo Element.attachShadow() conecta un rbol shadow DOM al elemento especificado.
• La propiedad Element.shadowRoot retorna el shadow root acoplado al elemento determinado, o null si no hay un shadow root adjuntado.

Adiciones relevantes a Node

Adiciones a la interfaz Node relevantes al shadow DOM:

• El mtodo Node.getRootNode() retorna la raz del objeto del contexto, que opcionalmente incluye el shadow root si se encuentra disponible.
• La propiedad Node.isConnected retorna un boleano indicando si el Nodo esta o no conectado (directamente o indirectamente) al objeto del contexto, es decir, el objeto Document en el caso del DOM normal, o al ShadowRoot en el caso del shadow DOM.

Extensiones a Event

Extensiones a la interfaz Event relacionada al shadow DOM:

• Event.composed: Retorna un Boolean que indica si el evento se va a propagar a travs de los lmites del shadow DOM hacia el DOM normal (true), o no (false).
• Event.composedPath: Retorna la ruta del evento (objetos en los que oyentes sern invocados). Esto no incluye nodos en shadow trees si el shadow root fue creado con ShadowRoot.mode cerrado.

Plantillas HTML

<template>

Contiene un fragmento de HTML que no es renderizado cuando se carga inicialmente un documento que lo contiene, pero puede ser desplegado en tiempo de ejecucin usando JavaScript, principalmente usado como la base de la estructura de los elementos personalizados. La interfaz DOM asociada es HTMLTemplateElement.

<slot>

Un espacio termporal dentro de un componente web que se puede llenar con una plantilla de marcado propia, lo que permite crear rboles DOM separados y presentarlos juntos. La interfaz DOM asociada es HTMLSlotElement.

El atributo global HTML slot

Asigna un slot en un shadow tree de un shadow DOM shadow tree a un elemento.

Slotable

Un mixin implementado tanto por los nodos Element y Text, definiendo caractersticas que les permiten convertirse en el contenido de un elemento <slot>. El mixin define un atributo, Slotable.assignedSlot, el cual retorna una referencia al nodo del slot donde esta insertado.

Extensiones a Element

Extensiones a la interfaz Element relacionadas a slots:

• Element.slot: Retorna el nombre del slot del shadow DOM adjunto al elemento.

Pseudo-elementos de CSS

Pseudo-elementos especificamente relacionados a slots:

• ::slotted: Coincide cualquier contenido que es insertado dentro de un slot.

El evento slotchange

Disparado en una instancia HTMLSlotElement (elemento <slot>) cuando el o los nodos contenidos es ese slot cambia.

Ejemplos

Se estn construyendo varios ejemplos en nuestro repositorio de GitHub web-components-examples. Se aadirn ms con el tiempo.

Especificaciones

Specification
HTML # the-template-element
DOM # interface-shadowroot

Compatibilidad de los navegadores

[Soporte de Componentes Web]

(Imagen tomada de webcomponents.org)

Para revisar detalladamente el soporte para ciertas caractersticas (sobre todo en versiones anteriores o navegadores antiguos), se puede consultar las pginas de referencia listadas anteriormente

Ver tambin

• webcomponents.org Sitio que presenta ejemplos, tutoriales y otra informacin site featuring web components examples, tutorials, and other information.
• open-wc Sitio que incluye recomendaciones para el desarrollo, linting, testeo, demos, publicacin y automatizacin de componentes web
• webcomponents.dev Sitio que provee de una interfaz de desarrollo online para trabajar con componentes web, ya sea nativamente o con diferentes libreras
• Hybrids Librera para componentes web de cdigo abierto, que favorece objetos simples y funciones puras sobre la sintasis class y this. Provee de una sencilla y funcional API para crear elementos personalizados.
• LitElement (Proyecto Polymer) Marcos de trabajo para componentes web de Google con un conjunto de polyfills, mejoras y ejemplos. Actualmente es la forma ms sencilla de usar componentes web.
• Snuggsi Componentes web facilmente en ~1kB incluyedo polyfill Todo lo que se necesita es un navegador y conocimientos bsicos de HTML, CSS y clases de JavaScript para ser productivo.
• Stencil Conjunto de herramientas para construir componentes web de sistemas de diseo reusables y escalables.
• Slim.js Librera para componenetes web de cdigo abierto una librera con alto rendimiento para la autora rpida y fcil de componentes; extensible y acoplable y compatible con otros marcos de trabajo