Shadow DOM explicado con ejemplos interactivos: encapsulado, slots y parts
Simon Willison publica una página con demos que se ejecutan en el navegador para entender los shadow roots de CSS, generada a partir de un prompt a Fable 5.1 Medium.
Hay una página nueva para entender los shadow roots sin pelearse con la especificación. Son ejemplos que se ejecutan en el navegador y cubren el encapsulado de estilos, la herencia, los slots, los parts y el acceso desde JavaScript. La firma Simon Willison, y el punto de partida fue un artefacto construido con un prompt dirigido a Fable 5.1 Medium.
Un shadow root es un árbol DOM que se cuelga de un elemento anfitrión y vive aparte del resto del documento: sus hojas de estilo y sus nodos no se mezclan con los de fuera. Es la pieza sobre la que se apoyan los componentes web y también la que más veces se usa mal, porque el aislamiento no es total ni simétrico. Media hora leyendo la spec no aclara tanto como ver el borde en marcha.
Qué enseña cada ejemplo
El bloque de encapsulado muestra lo que casi nadie tiene claro hasta que lo sufre: el CSS de la página no entra, y el de dentro no sale. La herencia es la excepción que rompe la intuición, porque propiedades heredables como el color o la tipografía sí cruzan la frontera.
Los slots aparecen cuando el componente decide dónde colocar el contenido que le pasa quien lo usa, y los parts cuando quiere dejar hooks de estilo concretos hacia fuera. El apartado de acceso desde JavaScript es el que suele generar dudas en producción: element.shadowRoot devuelve el árbol en modo abierto y devuelve null si el componente se creó en modo cerrado, algo que conviene tener presente antes de escribir código de terceros que dependa de inspeccionar el DOM ajeno.
El prompt que originó la página, tal cual se escribió:
Build an artifact to explain shadow roots in CSS with interactive examples
Si mantienes un design system o incrustas widgets de terceros, los problemas que aparecen siempre son los mismos, y casi todos son de frontera: estilos que se filtran en una dirección, selectores que no alcanzan lo que deberían, o contenido que se coloca donde no toca. Tener un entorno donde mover esas piezas en vivo ahorra el ciclo de editar, recargar y adivinar. La página se queda en material didáctico, no en una herramienta que se integre en un flujo de trabajo, así que su valor es el de una referencia rápida para consultar cuando algo no se comporta como esperabas.
