El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Abans d'escriure una sola línia de codi amb Lit convé entendre quin problema ve a resoldre. Lit no és un framework que inventa el seu propi model de components des de zero, com sí que fan React o Vue: és una capa lleugera construïda directament sobre un estàndard de la mateixa plataforma web anomenat Web Components. Entendre aquest estàndard primer —què ofereix i què li falta— és la millor manera d'entendre per què existeix Lit i què hi guanya un desenvolupador en usar-lo. Aquesta lliçó assenta les bases teòriques del curs i presenta el projecte que construiràs al llarg dels deu mòduls: TaskFlow, una aplicació de gestió de tasques a l'estil Kanban.

Contingut

El problema: components d'interfície sense un estàndard comú
Web Components: les tres tecnologies que formen l'estàndard
Què li falta als Web Components "vanilla"
Què aporta Lit
Lit davant de frameworks com React, Vue o Angular (una primera foto)
El projecte guia del curs: TaskFlow

El problema: components d'interfície sense un estàndard comú

Durant anys, cada framework de JavaScript ha resolt el mateix problema —dividir una interfície en peces reutilitzables, encapsulades i amb estat propi— a la seva manera. React té els seus components amb JSX, Vue té els seus fitxers .vue, Angular té els seus components amb decoradors. Tots ells són excel·lents solucions, però comparteixen un inconvenient: un component de React no es pot usar directament dins d'una aplicació Vue sense capes d'adaptació, i viceversa. Cada framework defineix el seu propi concepte de "component" i aquest concepte no surt de les seves fronteres.

Això planteja diversos problemes pràctics:

Portabilitat: si una empresa construeix una llibreria de components d'interfície (botons, targetes, formularis) amb un framework concret, els equips que usen un altre framework no la poden reutilitzar sense fricció.
Longevitat: els frameworks evolucionen i de vegades queden obsolets. Un component lligat a una versió concreta d'un framework pot deixar de funcionar quan aquell framework s'abandona.
Cost d'aprenentatge: cada framework imposa la seva pròpia manera de pensar els components, encara que el problema que resolen sigui conceptualment el mateix en tots els casos.

La pregunta natural és: per què el mateix navegador no ofereix un mecanisme natiu per crear components d'interfície reutilitzables, sense dependre de cap framework? Aquesta pregunta és precisament la que responen els Web Components.

Web Components: les tres tecnologies que formen l'estàndard

"Web Components" no és una única API, sinó el nom que reben tres especificacions del W3C que, combinades, permeten crear elements HTML personalitzats amb comportament propi. Val la pena conèixer cadascuna per separat abans de veure com Lit les usa.

Custom Elements

L'especificació de Custom Elements permet definir noves etiquetes HTML, amb un nom triat pel desenvolupador (sempre amb un guionet, com <task-card> o <user-avatar>, per evitar col·lisions amb les etiquetes natives del navegador). Un cop definida, aquesta etiqueta es comporta com qualsevol altra: es pot inserir a l'HTML, té el seu propi cicle de vida, i el navegador la reconeix com un element real del DOM, no com una simulació.

class SaludoElemento extends HTMLElement {
  connectedCallback() {
    this.textContent = '¡Hola desde un Custom Element!';
  }
}

customElements.define('mi-saludo', SaludoElemento);

<mi-saludo></mi-saludo>

Amb només aquestes línies, <mi-saludo> ja és una etiqueta HTML vàlida que qualsevol navegador modern entén, sense necessitat de cap framework ni compilació prèvia.

Shadow DOM

El Shadow DOM resol el problema de l'encapsulament. Quan un component té el seu propi HTML intern i els seus propis estils CSS, és fàcil que aquests estils "s'escapin" i afectin la resta de la pàgina, o que estils externs trenquin l'aspecte del component. El Shadow DOM crea un arbre del DOM separat ("ombra") penjat d'un element, amb el seu propi CSS que no surt dels seus límits i que tampoc no rep estils externs per accident.

class Caja extends HTMLElement {
  connectedCallback() {
    const raiz = this.attachShadow({ mode: 'open' });
    raiz.innerHTML = `
      <style>
        div { border: 2px solid teal; padding: 8px; }
      </style>
      <div>Contenido encapsulado</div>
    `;
  }
}
customElements.define('mi-caja', Caja);

El detall de com Lit treballa amb estils i Shadow DOM s'estudia amb profunditat al mòdul d'estils; de moment n'hi ha prou de saber que existeix i per a què serveix: aïllar un component de la resta de la pàgina.

HTML Templates

L'etiqueta <template> permet declarar fragments d'HTML que el navegador analitza però no renderitza fins que el codi JavaScript decideix clonar-los i inserir-los. És la base sobre la qual s'han construït històricament moltes solucions de plantilles eficients, perquè el contingut d'una plantilla es pot clonar moltes vegades sense tornar-la a analitzar.

<template id="plantilla-tarjeta">
  <p>Tarjeta reutilizable</p>
</template>

Aquestes tres peces —Custom Elements, Shadow DOM i HTML Templates— són estàndards suportats de manera nativa per tots els navegadors moderns. No depenen de cap llibreria.

Què li falta als Web Components "vanilla"

Si l'estàndard ja resol el problema, per què no n'hi ha prou d'usar-lo directament, sense cap llibreria? A la pràctica, treballar amb Custom Elements "a pèl" resulta tediós i propens a errors, per diverses raons:

Necessitat habitual	Com es resol amb Web Components vanilla
Actualitzar la interfície quan canvia una dada	Cal localitzar manualment els nodes del DOM afectats i modificar-los a mà (`textContent`, `setAttribute`...)
Evitar reconstruir tot l'HTML a cada canvi	Cal escriure a mà lògica de comparació i actualització selectiva del DOM
Declarar la plantilla de manera llegible	Se sol recórrer a concatenar cadenes d'HTML, amb el risc d'errors i problemes de seguretat (injecció d'HTML)
Reaccionar quan canvien diverses propietats alhora	Cal programar manualment l'agrupació d'actualitzacions per no repintar de més
Escriure menys codi repetitiu	No existeix una capa de conveniència: cada component repeteix patrons semblants

Res d'això és impossible de resoldre a mà, però implica escriure i mantenir molt codi de "fontaneria" que no aporta valor de negoci. Com més components té una aplicació, més es nota aquest cost.

Què aporta Lit

Lit és una biblioteca lleugera creada per Google (hereva d'un projecte anterior anomenat Polymer) l'únic objectiu de la qual és fer que escriure Web Components sigui agradable, sense ocultar ni substituir l'estàndard subjacent. Un component escrit amb Lit és un Custom Element real; Lit no crea un model paral·lel de components, simplement afegeix una capa de sucre sintàctic i optimitzacions sobre l'API nativa. Les seves aportacions principals són:

Plantilles reactives declaratives: s'escriu l'HTML del component fent servir una funció de plantilla etiquetada (html), en un estil molt llegible, i Lit s'encarrega d'actualitzar només les parts del DOM que realment canvien.
Menys codi repetitiu: declarar propietats reactives, reaccionar als seus canvis i tornar a renderitzar es redueix a unes poques línies, davant de la gestió manual que exigiria el DOM natiu.
Rendiment: Lit no torna a analitzar ni reconstruir l'HTML complet a cada actualització. Internament identifica quines expressions de la plantilla han canviat i actualitza únicament aquests punts del DOM, la qual cosa el fa molt eficient fins i tot en interfícies amb moltes actualitzacions freqüents.
Mida reduïda: Lit pesa uns pocs kilobytes comprimits, molt per sota de la mida típica d'un framework d'aplicació complet.
Compatibilitat amb l'estàndard: en generar Custom Elements reals, un component Lit es pot usar en qualsevol pàgina HTML, amb qualsevol framework, o sense cap.

En definitiva, Lit no competeix amb l'estàndard de Web Components, l'abraça: pren les parts més incòmodes de treballar amb Custom Elements i Shadow DOM directament i les converteix en una experiència de desenvolupament còmoda i moderna.

Lit davant de frameworks com React, Vue o Angular (una primera foto)

És habitual preguntar-se com encaixa Lit davant dels grans frameworks d'aplicació. La resposta curta és que no són exactament comparables: React, Vue i Angular són frameworks d'aplicació complets, amb el seu propi model de components, enrutament, gestió d'estat global i ecosistema; Lit és una biblioteca centrada exclusivament a crear components que són, a més, estàndards natius del navegador.

Això té una conseqüència pràctica important: un component fet amb Lit es pot usar dins d'una aplicació React, Vue o Angular com si fos una etiqueta HTML més, i també es pot usar en una pàgina sense cap framework. Un component de React, en canvi, normalment només es pot usar dins d'una aplicació React.

Aquesta comparació es reprendrà amb molt més detall —incloent exemples concrets d'interoperabilitat— al mòdul d'integració i interoperabilitat. De moment, n'hi ha prou de quedar-se amb la idea que Lit i els grans frameworks no competeixen en el mateix terreny: Lit està pensat per construir components reutilitzables i estàndard; els frameworks d'aplicació estan pensats per construir aplicacions completes (i, de fet, poden usar components de Lit dins seu).

El projecte guia del curs: TaskFlow

Al llarg d'aquest curs no es veuran exemples solts i desconnectats entre si. En el seu lloc, tot el que s'explique s'aplicarà de manera progressiva a un únic projecte: TaskFlow, una aplicació de gestió de tasques a l'estil Kanban (columnes de tasques com "Pendent", "En curs" i "Fet").

TaskFlow es construirà, mòdul a mòdul, com un conjunt de Web Components fets amb Lit, entre ells:

<task-card>: representa una targeta individual amb la informació d'una tasca.
<task-list>: una columna del tauler que agrupa diverses targetes.
<task-board>: el tauler complet, que organitza diverses llistes.
<task-filter>: un control per filtrar les tasques visibles.
<user-avatar>: un petit component reutilitzable que mostra l'avatar de la persona assignada a una tasca.

Cada mòdul del curs anirà afegint capacitats a aquests components: primer es crearan de manera estàtica, després se'ls donarà estat i reactivitat, més endavant estils acurats, comunicació entre ells mitjançant esdeveniments, comportaments de cicle de vida, funcionalitats avançades de plantilles i, finalment, al mòdul 10, s'integrarà tot en una aplicació TaskFlow completa, provada i llesta per desplegar.

Errors Comuns i Consells

Confondre "Web Components" amb "Lit": són coses diferents. Web Components és l'estàndard de la plataforma; Lit és una llibreria que facilita treballar amb aquest estàndard. Es pot usar Web Components sense Lit, però no es pot usar Lit sense que el resultat siguin Web Components.
Pensar que Lit és "un altre framework més" que competeix amb React: com s'ha vist, el seu propòsit és diferent (crear components estàndard reutilitzables, no aplicacions completes), encara que a la pràctica es pugui usar per construir aplicacions senceres, com es farà amb TaskFlow en aquest curs.
Subestimar el valor de l'estàndard: qui ja coneix un framework d'aplicació pot sentir la temptació de saltar-se aquesta base teòrica. No obstant això, entendre quines parts són "estàndard del navegador" i quines són "sucre de Lit" ajudarà molt a depurar problemes i a llegir documentació tècnica més endavant.
Esperar sintaxi de Lit al codi d'exemple d'aquesta lliçó: els exemples de codi natiu (HTMLElement, customElements.define, attachShadow) són intencionadament "vanilla", sense Lit, per mostrar l'estàndard pur. La sintaxi pròpia de Lit comença a la lliçó 3 d'aquest mateix mòdul.

Exercicis

Sense usar cap llibreria, crea en un fitxer HTML un Custom Element anomenat <mensaje-bienvenida> que, en inserir-se a la pàgina, mostri el text "Bienvenido a TaskFlow" dins d'un <p>.
Modifica l'exercici anterior perquè el text es renderitzi dins d'un Shadow DOM, amb un estil CSS que posi el color de fons en un to clar i quedi encapsulat (és a dir, que no afecti la resta de la pàgina).
Escriu, amb les teves pròpies paraules i sense mirar la lliçó, una llista de tres tasques de "fontaneria" que hauries de programar a mà si construïssis <task-card> amb Web Components vanilla, sense cap llibreria com Lit.

Solucions

<!DOCTYPE html>
<html lang="es">
<body>
  <mensaje-bienvenida></mensaje-bienvenida>

  <script>
    class MensajeBienvenida extends HTMLElement {
      connectedCallback() {
        const parrafo = document.createElement('p');
        parrafo.textContent = 'Bienvenido a TaskFlow';
        this.appendChild(parrafo);
      }
    }
    customElements.define('mensaje-bienvenida', MensajeBienvenida);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<body>
  <mensaje-bienvenida></mensaje-bienvenida>

  <script>
    class MensajeBienvenida extends HTMLElement {
      connectedCallback() {
        const raiz = this.attachShadow({ mode: 'open' });
        raiz.innerHTML = `
          <style>
            p {
              background-color: #eef6ff;
              padding: 8px;
              border-radius: 4px;
            }
          </style>
          <p>Bienvenido a TaskFlow</p>
        `;
      }
    }
    customElements.define('mensaje-bienvenida', MensajeBienvenida);
  </script>
</body>
</html>

En usar attachShadow, l'<style> intern només afecta el <p> que està dins d'aquest mateix arbre Shadow DOM: si la pàgina tingués un altre <p> fora del component, no es veuria afectat per aquest estil, i viceversa.

Una possible resposta (les tres tasques més habituals): (a) localitzar i actualitzar manualment els nodes del DOM cada vegada que canvien les dades de la tasca (títol, estat, persona assignada); (b) escriure a mà la lògica per no tornar a construir tota la targeta des de zero a cada canvi, sinó actualitzar només el necessari; (c) gestionar manualment el registre de l'element, els seus atributs inicials i la sincronització entre atributs HTML i propietats JavaScript.

Conclusió

En aquesta lliçó has vist que els Web Components són un estàndard natiu del navegador format per tres peces —Custom Elements, Shadow DOM i HTML Templates— que permeten crear elements HTML reutilitzables i encapsulats sense dependre de cap framework. També has vist que treballar amb aquest estàndard directament resulta tediós, i que aquí és exactament on entra Lit: una biblioteca lleugera que afegeix plantilles reactives, actualitzacions eficients del DOM i molta menys repetició de codi, sense deixar de produir Custom Elements estàndard. Finalment, s'ha presentat TaskFlow, el projecte de gestió de tasques que anirem construint al llarg de tot el curs.

A la lliçó següent deixarem la teoria de banda i prepararem l'entorn de desenvolupament: instal·larem Node.js, crearem un projecte amb Vite, instal·larem el paquet lit i deixarem tot a punt per escriure el primer component real a la lliçó 3.

Què són els Web Components i per què Lit?

Contingut

El problema: components d'interfície sense un estàndard comú

Web Components: les tres tecnologies que formen l'estàndard

Custom Elements

Shadow DOM

HTML Templates

Què li falta als Web Components "vanilla"

Què aporta Lit

Lit davant de frameworks com React, Vue o Angular (una primera foto)

El projecte guia del curs: TaskFlow

Errors Comuns i Consells

Exercicis

Solucions

Conclusió

Curs de Lit

Mòdul 1: Introducció a Lit i Web Components

Mòdul 2: Plantilles Reactives i Renderitzat

Mòdul 3: Propietats i Estat Reactiu

Mòdul 4: Estils en Components Lit

Mòdul 5: Esdeveniments i Comunicació entre Components

Mòdul 6: Cicle de Vida i Comportament Avançat

Mòdul 7: Directives i Funcionalitats Avançades de Plantilles

Mòdul 8: Integració, Interoperabilitat i Desplegament

Mòdul 9: Proves i Bones Pràctiques

Mòdul 10: Projecte: Construint TaskFlow