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í:
262588213843476
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:
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.
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:
Proyecto finalizado
