Apuntes personales sobre Web Components, recopilados mientras aprendía por mi cuenta y aplicaba en el trabajo. Cubren los fundamentos y el uso práctico de las tres tecnologías principales.
- Web Components — Visión general de las tres tecnologías y el flujo básico para crear un web component.
- Custom Elements — Tipos de elementos personalizados (autónomos e integrados mejorados), ciclo de vida, registro, atributos observados y estados personalizados.
- Shadow DOM — Árbol DOM encapsulado: creación imperativa y declarativa, encapsulamiento de JS y CSS, modos
open/closed, y aplicación de estilos. - Templates and slots — Uso de
<template>para markup reutilizable y<slot>para composición flexible con contenido del Light DOM. - Light DOM — Diferencia entre Light DOM y Shadow DOM, accesibilidad global vs. encapsulamiento.