javascript - 我有一个元素已声明为Shadow dom，但样式会影响其他元素

该代码是

<html>

<head>

</head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-
element/1.7.2/document-register-element.js"></script>
<div id = "1">
<style>
div {
    height: 30px;
    width: 30px;
    background-color: brown;
}
</style>
 </div>

 <script>
  document.getElementById('1').attachShadow({mode: "open"})
</script>
<div id = "2"></div>
<div id = "3"></div>
</body>

</html>

并且jsfiddle链接是https://jsfiddle.net/o5r229hf/

我已将div id 1声明为阴影dom，但div id 2和3正在获得样式。我编写这些元素的顺序可能会有所不同吗？

最佳答案

您正在将<style>标记创建为<div id="1">的子代，而不是影子DOM的子代。因此<style>存在于您创建的阴影之外。

CSS必须存在于shadowRoot内部才能影响该shadowRoot中的元素。

shadowRoot外部的任何CSS都不应影响shadowRoot内部的元素。 One minor exception is when using slots.

如果您的代码仅限于上面显示的内容，则需要通过执行以下操作将CSS移到shadowRoot中：

var el = document.getElementById('1');

var s = el.attachShadow({mode: "open"});

while(el.firstElementChild) {
  s.append(el.firstElementChild);
}

div {
  background-color: #F00;
  outline: 1px solid black;
  height: 80px;
  width: 80px;
}

<div id = "1">
  <style>
  div {
    height: 30px;
    width: 30px;
    background-color: brown;
  }
  </style>
  <div>I1</div>
</div>
<div id="2">
  <div>I2</div>
</div>
<div id="3">
  <div>I3</div>
</div>

这是将<div id="1">的子代复制到您创建的shadowRoot中。

这会将<style>标记移入其中，使其仅影响该<div>，而不会影响其他标记。

如果您的代码不限于上面的代码，则只需将CSS创建为shadowRoot的子代即可。

更新：

即使您的代码不在影子DOM中，您也可能需要将CSS添加到容器的影子DOM中。 Here is how to handle that.

ShadowRoot

javascript - 我有一个元素已声明为Shadow dom，但样式会影响其他元素