De Lit Element a Web Component

Explico como logré manipular los inputs a través del ciclo de vida de los web components

hace 3 meses   •   3 min de lectura

Por Andrés Tuñón

La forma que conocí los web components (WC) fue por Lit y me sentí muy familiarizado al ser parecido a React; pero hay unos puntos por aclarar, no es lo que aparenta.

Un Lit Element sigue siendo un WC; pero no es la forma "real", es opinionated y tiene muchas mejoras a comparación de trabajar directo con el estándar.

Si realizamos una comparación rápida, es como decir que Lit es React y WC es JS vanilla; Lit necesita transpilar a un WC y te ayuda a evitar mucho boilerplate.

¿Qué es un web component en realidad?

Un web component en realidad se ve así:

Rating Element WC example
Rating Element WC example. GitHub Gist: instantly share code, notes, and snippets.
Rating Element WC

Se puede apreciar los ciclos de vida básicos del WC, unos getters, setters y una función nueva llamada 'observedAttributes' que explico a continuación.

Tutorial de WC a Lit Element y que aprendí

Lit crea un getter/setter por ti cuando creas un método estático 'properties'; además, observa el cambio de esas propiedades:

método que genera las propiedades
método que genera las propiedades

Traté por varios días obtener el valor de la ip desde afuera como input, me di cuenta que desde firstUpdated no puedo por lógica de los ciclos.

No es un ciclo de vida tan uniforme como podrías imaginar, puedes hacer muchas cosas en varias partes.

Lifecycle – Lit
Simple. Fast. Web Components.
Ciclo de vida

En resumen, puedes llamar servicios en firstUpdated, pero si esa llamada depende de un input (como era mi caso) debe ser el willUpdate u otro método similar; porque los inputs se "cargan" después del primer update.

Shadow DOM vs Light DOM

Shadow DOM sirve para encapsular los estilos, para poder separar el código del resto de componentes.

Light DOM es como decir ng-content (Angular) o children (React), sirve para utilizar el árbol de nodos que se coloca en medio de la declaración del componente.

Además, se puede utilizar algo llamado 'slots' que es para definir donde se proyectará lo que estas enviando.

Lo que nos cuenta open-wc

Es muy común apoyarse en tecnologías que ya conoces, pero debes considerar sus diferencias; cada tecnología tiene su razón de ser.

Por ejemplo, mientras que un JS framework controla todas las pantallas y deja mucho JS en el sitio, los web components es solo un pedacito, es muy compacto y portable.

De hecho la documentación  siempre habla del momento en que se carga/descarga el web component al DOM, es un manejo distinto. Dejo la referencia:

Some things to know when developing with Lit
When comparing tooling opportunities it can be valuable to understand both sides in their native context before calling one better than the other.

Proyecto finalizado

Good Morning WC
Exploro las características principales de los web components para realizar una primera aplicación que muestra la fecha y hora actual y el pronóstico del tiempo.

Corre la voz

Sigue leyendo