Question

代码是

<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正在获得样式。我可以写下这些元素的顺序吗？

Answer 1

您正在将<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的子代。

<强>更新

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

Answer 2

使用shadow DOM，您可以使用:host：

定位CSS中的父元素

<div id="1">
<style>
:host {
    height: 30px;
    width: 30px;
    background-color: brown;
}
</style>
</div>

但是，即使是最新的浏览器，影子DOM也没有得到妥善处理。

来源：https://developer.mozilla.org/fr/docs/Web/CSS/:host

Answer 3

第一个解决方案：模板文字

直接在阴影dom中定义<style>元素：

＆＃13;

document.getElementById('1').attachShadow({mode: "open"}).innerHTML = `<style>
:host {
    height: 30px;
    width: 30px;
    background-color: brown;
}
</style>
<slot></slot>`

＆＃13;

<div id="1">D1</div>
<div id="2">D2</div>
<div id="3">D3</div>

＆＃13;

第二个解决方案：html模板

在<template>标签中定义阴影dom的所有内容，然后将其插入阴影dom。

＆＃13;

var tpl = document.querySelector('template')
document.getElementById('1').attachShadow({mode: "open"}).appendChild(tpl.content)

＆＃13;

<template>
  <style>
    :host {
      height: 30px;
      width: 30px;
      background-color: brown;
    }
  </style>
  D1
</template>

<div id="1"></div>
<div id="2">D2</div>
<div id="3">D3</div>

＆＃13;

我有一个元素，我已经宣布为影子dom，但风格影响其他elelemts

3 个答案: