已声明为Shadow DOM的元素样式仍影响其他元素的问题求助

嘿，这个问题我之前也碰到过，核心原因其实很简单：你只是给id="1"的元素创建了一个空的Shadow Root，但原来元素里的<style>标签还留在主DOM树里，根本没进入Shadow DOM的隔离环境，所以它的样式规则自然会作用于整个页面的所有<div>。

Shadow DOM的样式隔离逻辑是：只有放在Shadow Root内部的样式，才会被限制在Shadow DOM范围内生效。你现在的操作相当于给元素开了个Shadow DOM的“门”，但没把要隔离的东西放进去，样式当然还是全局的。

解决方法很直接，只需两步： #

• 创建Shadow Root之后，把原宿主元素内部的所有内容（包括那个<style>）移动到Shadow Root里
• （可选但推荐）别用纯数字做元素ID，不符合HTML规范，换成有意义的命名比如shadow-host

修正后的完整代码如下：

<html>
<head>
</head>
<body>
  <div id="shadow-host">
    <style>
      div {
        height: 30px;
        width: 30px;
        background-color: brown;
      }
    </style>
    <!-- 这里可以加Shadow DOM内部需要的元素，比如一个div -->
    <div>Shadow DOM内部的div</div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.7.2/document-register-element.js"></script>
  <script>
    const host = document.getElementById('shadow-host');
    // 创建Shadow Root
    const shadowRoot = host.attachShadow({mode: "open"});
    // 把原宿主内的所有内容移动到Shadow Root
    while (host.firstChild) {
      shadowRoot.appendChild(host.firstChild);
    }
  </script>
  <div id="2">主文档的div2</div>
  <div id="3">主文档的div3</div>
</body>
</html>

这样修改后，Shadow DOM内部的<style>只会影响它自己内部的<div>，页面上的id="2"和id="3"的div就不会被这个样式影响了。

内容的提问来源于stack exchange，提问作者Vivek Santhosh