<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>
I am struggling to understand the style scoping for web modules.
This css-tricks page says
Note that the functionality still works (although we had to querySelector through the shadowRoot), but we’ve totally lost the global styling. The Shadow DOM boundary (shadow root) prevents styling coming in or going out (sorta like an iframe).
I realize that the document I'm working with probably shouldn't have used such a broad body style. Can I find some documentation on why the text in my div is blue?
The short answer is that inheritance crosses the Shadow DOM boundary.
See 3.1. Informative Explanation of Shadow DOM. In particular it says:
... the shadow tree, when it exists, is used in the construction of the flattened element tree, which CSS uses for all purposes after Selectors (including inheritance and box construction).
This is why custom properties (CSS variables) can cross the Shadow DOM boundary, as described in the CSS-Tricks article.
Since color is an inherited property, and in your example is not reassigned inside the shadow tree, the text inside inherits the blue color.