Construyendo un Web Component sin Frameworks JS

Estamos en la época del furor de los componentes y se están utilizando en casi todas las páginas y aplicaciones web del momento; Facebook creó su propia librería para realizar sus componentes web, también Google creó su propio framework llamado Angular y hay muchas más librerías para hacer estos web components. en este artículo vamos a hablar acerca de los componentes web y de cómo construir uno sin usar ningún framework como ReactJS o VueJS.

¿Qué es un componente web?

Un componente web es un elemento que permite encapsular el código css, js y html en un solo elemento. Por defecto, los navegadores traen varios componentes web tales como <input> <p> <h1> <button> Todos estos son componentes web que están integrados por defecto en el navegador y se interpretan con sus propios estilos y código javascript.

¿Cómo crear mi propio componente web sin usar una libreria?

Para crear un componente web, debemos hacer uso de la clase CustomElementRegistry que nos permite usar su método define(), que requiere dos argumentos y tiene uno opcional:

DOMString:

Argumento requerido debe ser el nombre que se le va a dar al componente web. El nombre es, por ejemplo, en el caso de los componentes por defecto ‘input’ o ‘p’. En nuestro caso, vamos a crear un componente con el nombre “Hola mundo”. Los nombres de los componentes deben ser en minúsculas y los espacios deben ser reemplazados por un guión, por lo que el nombre de nuestro componente sería “hola-mundo”

class:

Al igual que el argumento DOMString, este argumento también es requerido. En él debemos definir el nombre de la clase previamente creada en la que programamos la funcionalidad del componente.

extends:

Este argumento opcional nos sirve para especificar que nuestro componente extiende de un componente ya existente entre los componentes pre construidos y definidos en el navegador.

Nuestro componente quedaría así:

// Definimos la clase HolaMundo:
class HolaMundo extends HTMLElement {
  constructor() {
    // Se debe llamar super() siempre que se sobreescriba el constructor
    // debe ser antes de cualquier otro código
    super();
    // Código del componente web puede ser escrito después de esta línea
    this.innerHTML = "<h1>Hola Mundo</h1>";
    console.log("Hola Mundo Cargado"); 
  };
};

// Agregamos el componente a los elementos personalizados o propios
customElements.define('hola-mundo', HolaMundo);

Para usar el componente web solo debemos escribir en el código html:

<hola-mundo></hola-mundo>

Si deseas ver el componente funcionando puedes verlo en el siguiente enlace: https://codepen.io/lcmartinez/pen/Oqobea

Usar componentes web sin frameworks es útil en proyectos pequeños que no requieren de funcionalidades muy avanzadas. Sin embargo, la tecnología promete y, a mi parecer, van a ser usados mucho más en el futuro.

Recursos:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements