Estilos con ámbito dentro del Shadow DOM

Todas las reglas de <style> dentro de una raíz shadow se aplican únicamente dentro de esa raíz. p { color: red } en un árbol shadow colorea solo los párrafos de ese shadow; los párrafos del documento principal no se ven afectados y los estilos del documento principal no llegan al interior del shadow.

La encapsulación elimina el problema del CSS global que ha afectado a las aplicaciones grandes durante décadas. Los estilos de un componente no pueden ser sobrescritos accidentalmente por el CSS del sitio, y el componente tampoco puede romper el sitio por accidente. El límite lo establece la especificación, no una convención.

Desde dentro del shadow, aplique estilos al elemento host mediante :host. Use :host(selector) para limitarlo según un selector: :host([open]) { display: block; } coincide con el host únicamente cuando está presente el atributo open.

Las propiedades CSS heredadas (color, font-family, line-height) siguen atravesando el límite del shadow mediante la herencia. Si el documento establece body { color: blue }, el texto del shadow también se vuelve azul, a menos que el shadow lo sobrescriba explícitamente. Esto es una ventaja: los valores predeterminados de tipografía siguen siendo coherentes.

Las propiedades personalizadas (variables CSS) se heredan a través de las raíces shadow, por lo que son la forma estándar de exponer la API de tematización de un componente: declare --card-bg: var(--surface, white) dentro del shadow y permita que los consumidores sobrescriban --surface en el host.

Marque un elemento interno del shadow con part="name" y los consumidores podrán aplicarle estilos mediante my-card::part(name) { ... }. Use parts como puntos de extensión para aplicar estilos individuales, manteniendo encapsulada la mayor parte del árbol shadow.

shadowRoot.adoptedStyleSheets = [sheet] comparte una misma CSSStyleSheet entre varias raíces shadow, evitando analizar repetidamente las etiquetas <style>. Cree las hojas con new CSSStyleSheet() y sheet.replaceSync(cssText). Esto mejora mucho el rendimiento en los sistemas de diseño.

Coloque las etiquetas <style> al principio de innerHTML del shadow para que los estilos se analicen antes de construir el resto del DOM. Así evita el breve destello de contenido sin estilos que se produce cuando los estilos llegan tarde en el orden de análisis.

:host-context(.dark-mode) :host aplica estilos al host según un selector de ancestro situado fuera del shadow. Es útil para tematizar componentes según una clase presente en un contenedor de nivel superior. La compatibilidad de los navegadores es buena, pero verifíquela en la matriz de destinos.

Los restablecimientos CSS de todo el documento (márgenes en body, box-sizing) no afectan a los árboles shadow. Vuelva a aplicar los restablecimientos necesarios dentro de cada raíz shadow o compártalos mediante una hoja de estilos construida y adoptada en cada componente.

Chrome DevTools muestra las raíces shadow en el panel Elements bajo "#shadow-root (open)". Puede inspeccionar, editar y activar o desactivar los estilos shadow como cualquier otro CSS, incluidas la pseudoclase :host y las reglas ::part.

¿Por qué las propiedades personalizadas de CSS (variables) son la forma preferida de tematizar un componente de Shadow DOM?

Shadow DOM encapsula los estilos en ambas direcciones. Aplique estilos al host con :host, exponga puntos de extensión para la tematización mediante propiedades personalizadas de CSS heredadas, exponga elementos individuales para aplicarles estilos con ::part, comparta hojas de estilo mediante adoptedStyleSheets y vuelva a aplicar los restablecimientos dentro de cada raíz shadow, ya que el CSS de todo el documento no atraviesa el límite.