<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>
我正在努力理解这style scoping for web modules个.
请注意，该功能仍然有效(尽管我们必须通过shadowRoot查询 Select 器)，但我们已经完全失go 了全局样式.The Shadow DOM boundary (shadow root) prevents styling coming in or going out (sorta like an iframe)
我意识到我正在使用的文档可能不应该使用如此宽泛的body样式.我能找到一些关于为什么我的div中的文本是blue的文档吗？