Qué es Generador de Shadow DOM declarativo?
Declarative Shadow DOM es una función del navegador que crea Shadow DOM a partir de marcado HTML sin JavaScript. Un elemento template con el atributo shadowrootmode dentro de un elemento host indica al navegador que cree un shadow root y lo poblene con el contenido de la plantilla. Esto permite la renderización del lado del servidor de componentes web con CSS con alcance, que funciona antes de que se cargue JavaScript.
Respuesta rápida
Declarative Shadow DOM crea DOM encapsulado y CSS con alcance a partir de marcado HTML sin JavaScript. Use <template shadowrootmode="open"> dentro de una etiqueta host de elemento personalizado. Compatible con Chrome, Edge y Safari. Incluya contenido de fallback para Firefox.
Last updated: 2026-05-28
Limitaciones
- Firefox aún no admite Declarative Shadow DOM (a partir de 2026). Siempre incluya contenido de fallback mostrado a través de CSS cuando DSD no sea compatible.
- Declarative Shadow DOM solo crea el shadow root y el contenido durante el análisis inicial de la página. El marcado DSD agregado dinámicamente no se procesa — use attachShadow() imperativo para creación del lado del cliente.
- Algunos frameworks y bibliotecas JavaScript aún no se integran con Declarative Shadow DOM para hidratación SSR. Verifique la compatibilidad del framework antes de adoptar DSD en una aplicación basada en framework.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese una etiqueta host de elemento personalizado con un guión (requerido para nombres de elementos personalizados válidos).
- Elija el modo de shadow root abierto o cerrado — open permite acceso JavaScript a través de shadowRoot.
- Agregue el contenido HTML interno con elementos slot para proyección de contenido.
- Opcionalmente agregue CSS con alcance que solo se aplique dentro de este shadow root.
- Copie el fragmento e inclúyalo en su salida SSR o HTML estático.
Para qué puedes usarla
- Renderizar un componente web con CSS con alcance en el servidor para que aparezca inmediatamente sin JavaScript.
- Crear un widget HTML autocontenido con estilos aislados para incrustar en cualquier página.
- Construir un componente de sitio estático con encapsulación shadow DOM sin un paso de compilación.