Ninja Talent

Creación de Web Components con LitElement

Creando etiquetas HTML

Antes de nada es necesario conocer Web Components.

Web Components es un conjunto de funcionalidades estándar que nos permite crear nuevos elementos, en forma de etiquetas HTML, para utilizar en aplicaciones web.

Los Web Components presentan las siguientes características principales:

  1. Son nativos: son parte del navegador y no requieren bibliotecas externas.
  2. Son reutilizables: se pueden introducir en cualquier parte de un documento.
  3. Están encapsulados: aunque con algunas excepciones, adquieren un comportamiento y propiedades independientes del resto de componentes.
código html 2

Tecnologías que forman Web Components

Web Components lo forman cuatro tecnologías que a su vez pueden ser utilizadas por separado:

  1. Shadow DOM (DOM oculto)
  2. Custom Elements (Elementos personalizados)
  3. HTML Templates (Plantillas HTML)
  4. HTML Imports / ES Modules (Importar documentos)

De todas ellas, cabe destacar el término Shadow DOM (o DOM oculto), ya que es lo que dotará a los elementos creados bajo esta tecnología de propiedades “aisladas” del resto de componentes. Los componentes que funcionan bajo el Shadow DOM adquieren estilos independientes, que no afectan al resto del DOM, y permiten incluir componentes hijos sin que afecten accidentalmente a otros. En este punto podríamos diferenciar entre Light DOM, con el comportamiento tradicional que conocemos, y Shadow DO

código html

Creando Web Components de manera ágil

Como siempre en JavaScript, contamos con librerías que nos permiten llevar a cabo un desarrollo de manera más fluida, y para Web Componentes también existen multitud de ellas que nos facilitan crear estos nuevos elementos HTML.
Lo que hacen estas librerías es integrar las tecnologías que forman parte de Web Components. Aquí algunas de ellas:

  1. Polymer
  2. LitElement
  3. Stencil
  4. Skate
  5. Hybrids

¿Qué es LitElement?

LitElement es una “clase base” para crear Web Componentes de manera rápida y ligera. Es la evolución activa de Polymer, que dejó de desarrollarse en 2017 y fue creada por Google. Pero aún así está presente de alguna forma en numerosas páginas web como Google, Youtube y Google Earth.

Los Web Components creados con LitElement se pueden instanciar y configurar usando atributos o propiedades, y además responden a sus cambios de estado y ciclo de vida interno. Tras ejecutar npm install –save lit-element el proceso es sencillo y no difiere mucho del procedimiento común de los frameworks de front end como pueden ser React o Vue.

En este caso de ejemplo se crea un archivo hello-element.js

ejemplo de código JavaScript

Es importante definir estos componentes bajo customElements.define con nombres formados por dos palabras separadas por un guion (hello-element). Es un requerimiento para evitar conflictos con las etiquetas HTML ya existentes.

Una vez tenemos el nuevo componente creado, simplemente hay que importarlo en cualquier lugar que haya HTML. Por ejemplo en el template de una aplicación de Vue:

código javascript 2
app Vue.js

Resultado y conclusiones

¿Por qué utilizar Web Components?

Los Web Components son componentes basados en los estándares web y son independientes de los frameworks. LitElement nos facilita el manejo y el desarrollo de Web Components.

Utilizar Web Components resulta muy conveniente por los siguientes motivos:

  • Independencia de los frameworks y a su vez la alta compatibilidad con ellos.
  • Por interoperabilidad. Están encapsulados y se pueden reutilizar.
  • Para generar librerías UI. Uno de los usos más comunes, y que nos permitirá unificar el diseño y estilo de una empresa o aplicación.
  • Si hay un cambio de stack no hay que reescribir componentes ya que forman parte de una tecnología nativa del navegador.

Aún así hay ciertas cosas que hay que tener en cuenta. El hecho de que esté basado en los estándares web conlleva que, por lo general, el proceso de alcanzar un consenso entre todos los navegadores para integrar nuevas tecnologías suele ser lento, y por lo tanto estamos hablando de una tecnología que avanza a un ritmo diferente del que pueden avanzar los frameworks más comunes. Esto lleva a que popularmente tenga tanto admiradores como detractores.

"Espero que os sirva de ayuda."
favicon
Tino Gutiérrez
Full Stack Developer

¿Quieres ser Ninja?

Demuestra tu talento tecky y consigue el certificado Ninja al realizar tu Code Challenge, evaluado por los Ninjas Master, que te abrirá las puertas a las mejores empresas.

Deja un comentario


El periodo de verificación de reCAPTCHA ha caducado. Por favor, recarga la página.