<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>somebody made a very broad selector</p> <isolated-stuff></isolated-stuff> </body> <script> class DemoElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style>div { font-size: 24px; }</style> // I can add `color: initial` here 😒 <div>why am i blue?</div>`; } } customElements.define('isolated-stuff', DemoElement); </script> </html>Me cuesta entender el alcance del estilo de los módulos web .
Esta página de trucos css dice
Tenga en cuenta que la funcionalidad aún funciona (aunque tuvimos que consultar Selector a través de shadowRoot), pero hemos perdido por completo el estilo global. El límite de Shadow DOM (shadow root) evita que el estilo entre o salga (algo así como un iframe) .
Me doy cuenta de que el documento con el que estoy trabajando probablemente no debería haber usado un estilo de body tan amplio. ¿Puedo encontrar alguna documentación sobre por qué el texto en mi div es azul ?
La respuesta corta es que la herencia cruza el límite de Shadow DOM.
Ver 3.1. Explicación informativa de Shadow DOM . En particular dice:
... el árbol de sombra, cuando existe, se usa en la construcción del árbol de elementos planos, que CSS usa para todos los propósitos después de los selectores (incluida la herencia y la construcción de cajas).
Esta es la razón por la cual las propiedades personalizadas (variables CSS) pueden cruzar el límite de Shadow DOM, como se describe en el artículo CSS-Tricks.
Dado que el color es una propiedad heredada, y en su ejemplo no se reasigna dentro del árbol de sombras, el texto del interior hereda el color azul.