¿Qué es el shadow dom y por qué todo frontend developer debería dominarlo?

DOM Normal vs Shadow DOM

• DOM Normal: Todo vive en el mismo árbol. Un "p { color: red }" global puede afectar fácilmente a tus componentes.
• Shadow DOM: Crea un árbol DOM aislado, Shadow Root, dentro del componente. Lo que pasa dentro, se queda dentro.

¿Cómo funciona Shadow DOM?

• Crear un Custom Element.
• Adjuntar un Shadow Root "this.attachShadow({ mode: 'open' })".
• Pones el HTML, CSS y JS dentro del Shadow DOM.
• Todo queda encapsulado.

Ventajas clave de usar Shadow DOM

• Evita conflictos de CSS
• Aísla estructura y comportamiento
• Mejora drásticamente la reutilización de componentes
• Componentes más robustos y mantenibles
• Base fundamental de las librerías modernas como Lit, Stencil, Angular Elements, etc.

Modos del Shadow Root

• "open": Se puede acceder al shadow root desde JavaScript externo "element.shadowRoot"
• "closed": Más seguro, pero menos flexible, no se puede acceder fácilmente

¿Dónde se usa Shadow DOM?

• Carritos de compra
• Switches y toggles
• Modales
• Design Systems
• Librerías de componentes