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

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

Seguimos hablando de slots en componentes de Lit y Web Components en general. En esta ocasión abordaremos el modo de aplicar estilos a los slots y el uso del pseudo-elemento ::slotted().

En este artículo vamos a ver cómo puedes acceder al DOM que se ha creado como hijos del componente, en la etiqueta host, llamado DOM local del componente o bien Light DOM.

Comenzamos en tema del ciclo de vida de los componentes en Lit con un artículo que mostrará la importancia de esta parte y el resumen de los métodos disponibles en el estándar de Web Components y en la liberería Lit.

En este artículo vamos a ver un ejemplo completo de uso del ciclo de vida de los Web Components, con los métodos connectedCallback y disconnectedCallback. Desarrollaremos un componente de scroll muy útil y frecuentemente usado en el sitios web.

Seguimos trabajando con los métodos del ciclo de vida de los componentes. En este caso vamos a aprender a usar firstUpdated() que es el método del ciclo de vida más usado en los componentes Lit.

Veremos otro método muy importante del ciclo de vida de los componentes Lit llamado updated(). Este método permite ejecutar código después de que el template del documento se haya actualizado a raíz del cambio de una de sus propiedades.

Seguimos aprendiendo cosas sobre el ciclo de vida de las propiedades de los componentes en Lit. En esta ocasión explicaremos cómo controlar cuándo se debe desencadenar un cambio en el template al cambiar el valor de la propiedad.

Seguimos trabajando con el ciclo de vida de los componentes. Ahora tocamos requestUpdate() que permite solicitar de forma explícita y programática la actualización de un template de Lit.

El hecho de Lit implementar updates asíncronos es muy importante y lo debes entender para resolver situaciones un poco más avanzadas sobre el ciclo de vida de los componentes.