Los Web Components son un estándar del World Wide Web Consortium (W3C) cuya finalidad es crear nuevos elementos para la web. Además, también se podrán reutilizar fácilmente y extender, tanto los componentes que desarrollemos, como los nativos. Son parte del navegador, y por lo tanto, no es necesaria ninguna biblioteca externa como jQuery, por ejemplo. Para utilizar nuestros web components, solo será necesaria una sentencia en nuestro HTML.

Lo ideal, por tanto, sería que estuviera disponible en todos los sitios sin que suponga un riesgo su adopción, que proporcione un alto rendimiento sin necesidad de sacrificar tiempo de ejecución, y que se mantengan las etiquetas semánticas y declarativas.

¿Qué son los web components?

Los web components están basados en la combinación de cuatro tecnologías diferentes que pueden usarse por separado:

Custom Elements

Sus características son las siguientes:
• El elemento Custom Elements global se usa para definir un elemento personalizado como extender uno ya creado o nativo, y notificar al navegador sobre una nueva etiqueta.
• Es necesario que el nombre esté compuesto de dos palabras separadas por un guión, para que el analizador de HTML pueda distinguir los elementos personalizados de los comunes. También garantiza la compatibilidad con futuras etiquetas HTML.
• Debe extender la clase HTMLElement. La extensión de HTMLElement garantiza que el elemento personalizado herede toda la API de DOM, lo cual significa que las propiedades o los métodos que agregues a la clase formarán parte de la interfaz del DOM del elemento. En el caso de extender elementos nativos, se deberá extender de la interfaz correcta del DOM. Por ejemplo, un elemento personalizado que extiende debe heredar contenido de <HTMLButtonElement en lugar de HTMLElement>.

HTML Templates

Permite definir fragmentos de HTML que pueden ser clonados o insertados en un documento.

Shadow DOM

• Nos permite tener un DOM independiente donde sus elementos y estilos no afectan a otros.
• Sustituiremos el método connectedCallback por el constructor.

ES Modules

Es el estándar de ECMAScript para importar módulos Javascript. Permite tanto la carga síncrona como asíncrona de los mismos, los puede analizar estáticamente, y por lo tanto, nos ofrecerá una carga más óptima de nuestras dependencias.

Creando un Web Component

1. Custom Element

El primer paso es crear nuestro Custom Element.

1. Definimos el nombre de nuestra etiqueta HTML, siempre teniendo en cuenta que debe estar compuesta de dos palabras separadas por un guion.
2. Creamos una clase en un fichero index.js en el que definiremos nuestro Custom Element extendiendo de HTMLElement.
3. Añadimos a nuestra clase el método connectedCallback con el fin de que se dispare nuestro método una vez haya sido añadido al DOM.
4. Conectamos la etiqueta que hemos creado con la clase de nuestro componente mediante el método “define”, y de este modo haremos saber a nuestro HTML que debe renderizar. Por ejemplo: Window.customElements.define(‘etiqueta-componente’, ClaseComponente)
5. Cargaremos el index.js a nuestro index.html, y usaremos el elemento creado.

2. Shadow DOM

El Shadow DOM nos va a permitir tener un DOM completamente independiente, cuyos elementos y estilos no afecten a otros. Gracias a esta independencia evitamos cualquier efecto no deseado.

1. Lo primero, en lugar del método connectedCallback, utilizaremos el constructor.
2. A continuación, indicaremos que el elemento va a ser adjuntado a un Shadow DOM.
3. Para terminar, reutilizaremos el innerHTML que teníamos pero insertándolo en la raíz del Shadow DOM.

3. HTML templates

Es otra forma de conseguir lo mismo que con Shadow DOM. La diferencia radica en que, para separar la implementación del elemento del template, usaremos ES Modules.

El elemento permite declarar fragmentos de DOM que se analizan, permanecen inactivos durante la carga de la página y se pueden activar más adelante en el tiempo de ejecución.

Los web components nos facilitan una herramienta para definir nuevas etiquetas HTML en el navegador y crear componentes reutilizables.

• Es compatible con varios navegadores para crear y extender componentes reutilizables.
• No requiere una biblioteca, ni tampoco framework.
• Proporciona un modelo de programación conocido,DOM/CSS/HTML.
• Se integra totalmente con DevTools del navegador.
• Permite aprovechar las características de accesibilidad existentes.
• Posibilita una reducción del código, su modularización y una mayor capacidad de reutilización.
• Se puede hacer casi cualquier cosa que pueda hacerse con HTML, CSS y Javascript.

El departamento de I+D+I de Teldat utiliza la tecnología de web components en sus soluciones SD-WAN, tanto para grandes corporaciones como en las soluciones para pymes.
Esta tecnología incrementa la eficiencia del equipo de I+D+I y