¿Qué son los web components?

Algunas librerías como Reack o Vue, y frameworks como Angular e Ionic trabajan desde la perspectiva de los web components.
Los web components contienen diferentes tecnologías y especificaciones que facilitan al desarrollador la posibilidad crear los suyos propios. En este sentido, al estar encapsulados y poseer un alto grado de independencia respecto al resto del código, se convierten en una herramienta potente para el desarrollo de aplicaciones.
Ni que decir tiene el tema de la reutilización.

Cuando se trata de lenguaje de marcas, dicha reutilización se convierte en algo más complejo. Aquí entran en juego estilos y scripts asociados que, si son reescritos, pueden provocar conflictos si se usan en más de un lugar.
Y mientras más volumen tenga el proyecto, más dificultades habrá.
Una posible solución a este problema son precisamente estos componentes web.

¿De qué partes constan?

Principalmente de 4.

• Custom elements: es la parte personalizable. A partir de APIs de JavaScript es posible definir la estructura del componente para que se adapte a las necesidades del proyecto y darle funcionalidad. Incluye etiquetas HTML, reglas CSS y scripts.
• Shadow DOM: también a través de librerías se crea un subárbol dentro DOM, donde los nodos de estructura, estilos y funcionalidad son independientes. Así, cada elemento mantiene sus características privadas, concediendo un alto grado de seguridad al documento.
• ES modules: módulos para la exportación de variables y funciones desde JS
• HTML Templates: creadas a gusto del desarrollador.

Un custom element se define haciendo uso del método define() y pasando el nombre, tipo y el elemento del que hereda (opcional) como parámetros.

customElements.define(‘my-element’, MyElement, { extends: ‘p’ });

Para poder usar este componente se coloca la etiqueta en un HTML:

<my-element></my-element>

No hay que olvidarse de incluirlo en el customElementRegistry.

El shadow DOM se agrega al HTML muy fácilmente, como se muestra a continuación:

Los ES modules son módulos para la importación de variables, funciones desde un archivo de JavaScript para poder usarlas en otro distinto.
Esto es sencillísimo, sólo hay que usar la función export.
export { name1, name2, …, nameN };

Para importar sucede lo mismo:
import {function} from ‘./lib’;

Las plantillas HTML almacenan los elementos que no se mostrarán, a menos que de forma explícita sean llamados. Esto hace que no interfieran en la carga de la página Para usarlas es necesario activarlas a través de getElementbyID() y content().

¿Cómo se implementan los componentes?

1. crear una función o una clase en la cual se indique la funcionalidad del componente.
2. registrar el componente con customElementRegistry.edfine() pasando los parámetros indicados anteriormente.
3. si no se ha hecho previamente, incluir el shadow DOM del componente con Element.attachShadow().

4. Para la plantilla, si no se ha definido usar y y después acoplarla al shadowDOM com los métodos del DOM.
5. Finalmente usar la etiqueta para llamar al componente donde se quiera mostrar.

Una herramienta interesante es Stencil, la cual permite la creación de componentes web escalables y reutilizables y ultrarrápidos, que se basan en estándares compatibles con todos los navegadores. Por otro lado, Polymer es una librería de de Google de código abierto orientada hacia el mismo propósito.

En conclusión, tanto para una funcionalidad pequeña y concreta, como para una que se repita sistemática en aplicaciones básicas crear componentes nativos es sin duda un buena opción para aquellos desarrolladores o empresas que quieran una adaptabilidad y flexibilidad total, aportando un valor único a su producto. Las posibilidades múltiples.