> Manuales > Manual de Lit

Lit es la librería más extendida para el desarrollo de componentes, basados en el estándar de Web Components. Con Lit podemos desarrollar "custom elements" o elementos personalizados, que no son más que etiquetas con las que podemos extender el HTML.

A los custom elements les llamamos habitualmente "componentes" y encapsulan un marcado, unos estilos y una funcionalidad, que se puede reutilizar todas las veces que sea necesario a lo largo de cualquier proyecto frontend. La ventaja de desarrollar custom elements del estándar de Web Components es que podemos usarlos en cualquier proyecto frontend, independientemente de si es Javascript nativo o estamos usando una librería como React, o framework como Angular.

Lit lo que permite es aportar funcionalidades adicionales encima del estándar, creando una clase base llamada LitElement, que usaremos para extender las clases que implementan los componentes. Gracias a ello conseguiremos componentes reactivos, sincronización con atributos y un ciclo de vida extra en el componente.

Las ventajas de Lit con respecto a cualquier otra librería de componentes son su mínimo peso (en torno de 5KB, por lo que podríamos considerarla una microlibrería), y que está basada en estándares, por lo que el uso de los componentes es transversal a cualquier tecnología frontend que puedas usar.

Es la evolución de LitElement, por lo que la mayoría del conocimiento que tienes de esa librería lo puedes aplicar directamente a Lit. En el Manual de Lit explicaremos las bases de esta nueva versión, aunque si tienes dudas también puedes resolverlas en el manual de LitElement. Este manual está en proceso de escritura, por lo que iremos publicando artículos poco a poco.

Manual de Lit
Artículos Descargas
  • Artículos del manual

  • Aprender Lit.dev

    Comenzamos el Manual de Lit con unos artículos introductorios en los que pretendemos explicar generalidades del desarrollo basado en componentes, con el estándar Web Components y ayudados por la librería (o micro-librería si lo prefieres) Lit. En estos artículos el objetivo no es tanto entrar al detalle, sino entender el estilo de trabajo con Web Components y las posibilidades que nos ofrece Lit para ser más ágiles y tener una mejor experiencia de desarrollo.

  • 1 Primeros pasos con Lit

    Qué es Lit y cómo comenzar a usarlo para desarrollar tus primeros componentes bajo el estándar Web Components.

  • 2 Usar componentes de Lit

    Web Components te permite no solo desarrollar tus propios componentes personalizados, sino además beneficiarte de todo un ecosistema de componentes ya creados que puedes implementar fácilmente en tus proyectos.

  • Las propiedades en Lit

    En los próximos artículos vamos a conocer una de las principales herramientas que tendremos a la hora de desarrollar custom elements con Lit, las propiedades. Mediante las propiedades podemos almacenar todo tipo de datos con los que el componente podrá trabajar. Veremos que existen diversas configuraciones de las propiedades y qué cosas nos permiten realizar, como la sincronización con los atributos, la implementación de los templates reactivos y muchas otras cosas.

  • 3 Propiedades de los componentes Lit

    Las propiedades son fundamentales en los componentes Lit, por eso vamos a estudiarlas con detalle. En este artículo aprenderás las cosas más importantes que debes conocer sobre las propiedades.

  • 4 Cambiar propiedades como respuesta a eventos en Lit

    Seguimos con unos capítulos dedicados a la introducción de características del desarrollo con Lit. En este caso veremos cómo se definen manejadores de eventos, lo que nos permitirá comprobar las propiedades reactivas de Lit.

  • 5 Propiedades reflect en Lit

    Veamos una de las configuraciones de las propiedades de los componentes lit: "reflect" que permite que los cambios en las propiedades del componente se reflejen en cambios en los atributos de la etiqueta host.

  • 6 Propiedades computadas en Lit

    No es un tipo específico de propiedad sino una técnica muy habitual mediante la cual mostramos el valor de una o más propiedades una vez realizado un cálculo, en vez del valor en crudo de las propiedades.

  • Templates de componentes en Lit

    Ahora nos vamos a centrar en el sistema de templates que nos ofrece Lit, con los que podremos definir la parte visual del componente, lo que se conoce comúnmente por "vista". Veremos diversas técnicas y utilidades para la creación de las vistas de los componentes y además podrás comprobar que los templates de Lit están basados mayormente en Javascript nativo, gracias a los "template strings" que aparecieron en ECMAScript 2015 y que están soportados por todos los navegadores. Esto es genial porque reduce la cantidad de código de Lit, consiguiendo que sea una librería tan ligera, siendo una de las claves que hacen que Lit tenga un rendimiento mayor que cualquiera de las librerías basadas en componentes, como React o Vue. Además, gracias a usar las características del propio Javascript, no necesitas aprender ningún lenguaje nuevo.

  • 7 Composición de templates en Lit

    Comenzamos la serie de artículos dedicados a estudiar los templates de Lit hablando de la composición de templates, mediante la cual podemos construir vistas del componente mediante un template principal y varios sub-templates.

  • 8 Condicionales en templates de Lit

    Comenzamos a incluir algo de lógica en nuestros templates Lit, comenzando por algo tan sencillo como introducir sentencias condicionales, que nos permitan mostrar unas cosas u otras en los componentes en función de la evaluación de una expresión.

  • 9 Repeticiones o bucles, en templates lit

    Seguimos trabajando con los templates de Lit. En esta ocasión vamos a ver cómo realizar repeticiones, mediante recorridos en arrays, para mostrar los valores que encontramos en ellos.

  • 10 Declarar manejadores de eventos en templates de componentes Lit

    Ahora vamos a conocer otra de las sintaxis habituales en los templates Lit, que nos permiten asociar de manera cómoda manejadores de eventos a los elementos del componente.

  • Binding e interoperabilidad

    El binding es la palabra anglosajona que usamos habitualmente para referirnos al enlace de datos. Mediante el binding podemos establecer la comunicación automática de los valores de una propiedad de un componente hacia la propiedad de otro componente. Esta comunicación se realiza automáticamente, de modo que cuando cambia el valor de la propiedad bindeada, se transfiere inmediatamente a todos los componentes hijos donde se encuentre enlazada. Esta es la base de la interoperabilidad de componentes desde padres a hijos, aunque también se produce comunicaciones de hijos a padres, en este caso mediante la transmisión de eventos. En los próximos artículos detallaremos todos estos mecanismos y su sintaxis en Web Components y Lit.

  • 11 Interoperabilidad entre componentes Lit

    Qué llamamos interoperabilidad, la capacidad de los componentes de apoyarse en otros componentes para realizar su trabajo. Ejemplos de interoperabilidad por medio del data binding de propiedades.

  • 12 Binding de propiedades boleanas en Lit

    Sintaxis del binding a propiedades boleanas en templates de Lit, junto con nuevos componentes de práctica de interoperabilidad entre custom elements.

  • 13 Bindear a propiedades en componentes Lit

    Hasta ahora hemos hecho mucho binding a atributo, pero también podemos hacer binding a propiedad en los componentes creados con la librería Lit. Estudiaremos las diferencias entre ambos casos y cuándo será necesario hacer el binding a propiedad.

  • 14 Comunicación de componentes de hijos a padres mediante eventos en Lit

    Dentro de la interoperabilidad de componentes, cuando las comunicaciones son ascendentes en el árbol de componentes, se realizan mediante la emisión de eventos personalizados en los hijos que capturan los padres.

  • Aplicación de estilos CSS en los componentes Lit

    En esta etapa del Manual de Lit vamos a abordar la aplicación de los estilos CSS, algo muy importante a la hora de desarrollar componentes reutilizables. Empezaremos explicando conceptos básicos sobre estilos CSS que afectan a Lit y al estándar de Web Components en general y luego veremos técnicas importantes que nos ayudarán a crear componentes más versátiles, con estilos adaptables al aspecto de las páginas donde los vas a usar. Mayormente todo lo que veremos aquí con cosas relacionadas con el estándar de Web Components y CSS, ya que Lit se basa mayormente en todo lo que los navegadores ya pueden hacer por ellos mismos.

  • 15 Estilos CSS en componentes Lit

    Comenzamos a tratar la aplicación de CSS en los componentes de Lit, con un artículo en el que nos encargaremos de aprender los aspectos más básicos y esenciales para poder definir estilos en el shadow DOM del componente.

  • 16 Variables CSS para personalizar estilos en componentes en Lit

    Seguimos hablando de estilos en componentes abordando las variables CSS, llamadas técnicamente custom properties, que nos permiten definir estilos en un componente con valores que luego podremos cambiar desde fuera.

  • Slots

    Los slots son una de las herramientas principales que tenemos en Web Components para montar el contenido de los custom elements, reutilizando partes del contenido de las etiquetas del componente en los lugares que se necesitan dentro del template. Por supuesto, Lit soporta el uso de slots básicos y slots con nombre. A lo largo de estos artículos aprenderemos a usar los slot y a entender su importancia, para asuntos tan relevantes como el SEO en Web Components o las posibilidades que tenemos de aplicar CSS a los slots desde dentro del componente.

  • 17 Trabajar con slots en Web Components y Lit

    Este artículo ofrece una introducción completa a los slots en Web Components, para qué nos sirven y por qué son importantes. Veremos además cómo trabajar con slots en la librería Lit con ejemplos relevantes.

  • 18 Mejorar el SEO en Web Components con Slots

    En este artículo seguimos hablando de slots para abordar un tema de gran importancia como es el SEO. Veremos cómo mejorar el SEO en aplicaciones Javascript y Web Components por medio de Slots.

  • Descargas

  • Libro electrónico del Manual de Lit

    Si lo prefieres, puedes acceder al contenido del Manual de Lit como libro electrónico, en formato PDF, ePub y Mobi para dispositivos Kindle. Así podrás llevar tu aprendizaje de la librería lit.dev allá donde quieras y leer cómodamente este tutorial en cualquier situación.

    Archivos disponibles: PDF, ePup, Mobi (Kindle)

    Páginas: 100 (Referencia por el archivo PDF)

    Ir a la descarga

Manuales relacionados