Lit / LitElement

> Temas > Lit / LitElement
Editar

Lit, antes conocido como LitElement, es una clase base para el desarrollo de custom elements, o elementos personalizados del estándar de Web Components, que permiten desarrollar componentes web Javascript estándar con diversas utilidades extra.

Lit es una librería para el desarrollo de custom elements, del estándar de Web Components, que permite muchas mejoras para un desarrollo ágil y amistoso encima del propio estándar.

Lit antes se conocía con el nombre de LitElement que es la clase base para crear elementos personalizados basados en el estándar Javascript de los Web Components. Además de LitElement, tenemos LitHTML, que es el motor de templates reactivos, que ofrece un gran rendimiento, incluso más rápido que otros motores reactivos como React. Ahora, bajo el nombre de Lit encontramos tanto a los antiguos LitElement y LitHTML. Este cambio se produjo a partir de la versión LitElement 3.0, en la que se agruparon a todas las librerías bajo un mismo paragüas con el nombre de Lit.

Actualmente la documentación de Lit se encuentra en Lit.dev aunque el funcionamiento sigue siendo exactamente el mismo que lo que se conocía anteriormente como LitElement, salvo por unos mínimos detalles en el ciclo de vida de los componentes. Por lo tanto, todo lo que puedes aprender sobre LitElement, por ejemplo en el Manual de LitElement, lo puedes aplicar directamente sobre Lit.

Lo más importante que encontramos en Lit es lo que antes conocíamos como LitElement y básicamente se trata de una clase de Programación orientada a objetos sobre la que podemos extender para crear componentes que tienen diversas utilidades significativas para que la experiencia de desarrollo sea más agrandable y más productiva.

Podemos considerar a LitElement como una librería para Web Components, aunque es quizás mejor el término "microlibrería", ya que su peso es alrededor de 6 KB (Gziped, en torno de 27 KB sin comprimir). Por tanto, el coste de aplicar LitElement para crear componentes es realmente asumible y justificado, dada la cantidad de beneficios que nos aporta.

LitElement a su vez se basa en LitHTML, que es una microlibrería (de peso en torno a 3 KB Gziped) para creación de templates reactivos, que consigue ser más rápida y aportar más rendimiento que cualquiera de los motores de templates más populares como el de React, Vue o Angular. LitHTML se puede usar en cualquier proyecto Javascript donde queramos usar plantillas capaces de reaccionar a cambios en el estádo de las aplicaciones. Podemos pensar en LitElement como un LitHTML extendido para poder ser usado cómodamente en el contexto de los custom elements del estándar Web Components.

Entre las posibilidades que nos aporta LitElement tenemos las siguientes:

  • Templates reactivos, que cambian automáticamente cuando cambia el estado (las propiedades) de los componentes
  • Capacidad de sincronización automática entre los atributos de las etiquetas y el estado de los componentes
  • Agrega nuevos métodos del ciclo de vida de los componentes
  • Ofrece diversas funciones de utilidad general para el desarrollo de componentes de interfaz gráfica
¿Quieres añadir algo sobre Lit / LitElement?

Crea artículos, recursos o comparte información sobre Lit / LitElement

Crear un bloque

Lit / LitElement

Manuales

Manual de LitElement
Este es el manual de LitElement que te permitirá crear Custom Elements (elementos personalizados), bajo el estándar Javascript de Web Components, con una base de utilidades muy interesante para el desarrollador.

Canales de eventos y clases en directo

Temas relacionados

Preguntas y respuestas

Se han recibido 1 faqs en Lit / LitElement

Hacer una pregunta