'What exactly are the css boundaries in web components?

<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?

htmlcssweb-component


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions