Resumen

  • En 2012, el W3C publicó un primer borrador sobre límites funcionales entre subárboles DOM. El borrador de 2014 puso el acento en la composición; una nota de 2018 explicó que el material pasaba a DOM, HTML, CSS Scoping y UI Events.
  • El DOM actual permite asignar hijos del árbol de la página a slots del árbol shadow. Esos hijos conservan su lugar en el árbol de nodos; las reglas CSS ofrecen aperturas elegidas como :host, ::slotted y ::part.

Pensemos en una tarjeta de noticia con fotografía, titular y botón. Quien fabrica la tarjeta quiere que el botón conserve su aspecto. Quien publica la página quiere elegir la foto y el titular. Si la hoja de estilos del sitio entra por todas partes, la tarjeta puede acabar vestida con ropa ajena. Si el componente cierra la puerta, se queda sin noticia. La solución necesitaba una puerta, no una muralla.

El primer borrador público del W3C, del 22 de mayo de 2012, planteó límites funcionales entre subárboles dentro de un mismo documento. El componente podía guardar una estructura propia y participar en la página. El borrador del 17 de junio de 2014 dio más protagonismo a la composición de varios árboles en una sola jerarquía visible. Ambos documentos registran el problema de diseño y las propuestas de su época.

La historia tampoco terminó dentro de un único PDF. La nota del W3C del 1 de marzo de 2018 informó de que la materia de Shadow DOM se estaba incorporando a las especificaciones DOM y HTML, CSS Scoping y UI Events. La habitación había crecido hasta exigir planos separados para estructura, presentación y comportamiento. El documento independiente perdió el monopolio de la explicación; el mecanismo quedó integrado en la plataforma.

La norma viva DOM de WHATWG describe el reparto actual. Un elemento actúa como anfitrión de una raíz shadow. Bajo ella vive el árbol interno del componente. Los hijos ordinarios que la página coloca bajo el anfitrión forman el árbol «light». Dentro del árbol shadow hay slots a los que se pueden asignar esos hijos. La tarjeta decide que el retrato aparezca arriba y el titular debajo. Ni el retrato ni el titular cambian por ello de padre en el árbol DOM de nodos: siguen siendo aportaciones de la página.

Esa separación explica muchas sorpresas de desarrollo. Al mirar la pantalla, parece que todo vive dentro de la tarjeta. Al seguir los nodos, una parte pertenece al documento exterior y otra al árbol shadow. Un slot vacío puede mostrar contenido de reserva preparado por el componente. La composición une las piezas para el lector sin borrar su procedencia. Al depurar, conviene preguntar dos veces: dónde se ve el elemento y a qué árbol pertenece.

El borrador CSS Shadow Module Level 1 del CSSWG completa la escena. Los selectores corrientes de la página no atraviesan sin más la frontera shadow para colorear cualquier descendiente interno. El componente tampoco tiene por qué dejar a la página sin herramientas. :host permite tratar el anfitrión desde los estilos del componente, ::slotted se dirige de forma acotada a contenido asignado y ::part da un nombre a una pieza interna que el componente decide ofrecer al estilo exterior. Es una ventanilla con rótulo, no una visita guiada por todos los cajones.

El módulo CSS consultado es un borrador de los editores. Su valor aquí es explicar el diseño y sus superficies de contacto; los registros de 2012, 2014 y 2018 fijan la cronología. El resultado se entiende mejor como un acuerdo entre autores. La página entrega contenido, el componente organiza el espacio y el navegador compone la escena sin fingir que todos escribieron el mismo árbol.