我有一个元素已声明为 shadow dom，但样式正在影响其他元素答案

【问题标题】：I have an element that i have declared as a shadow dom but the style is affecting the other elelemts我有一个元素已声明为 shadow dom，但样式正在影响其他元素
【发布时间】：2018-03-26 09:21:22
【问题描述】：

代码是

<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 声明为 shadow dom，但 div id 2 和 3 正在获取样式。我写元素的顺序会不会有什么问题？

【问题讨论】：

您正在使用div 选择器。这会将样式应用于所有 div 元素。

标签： javascript web-component shadow-dom

【解决方案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.

【讨论】：

【解决方案2】：

使用 shadow DOM，您可以在 CSS 中使用:host 定位父元素：

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

但是，即使是最新的浏览器，也无法正确处理 shadow DOM。

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

【讨论】：

这只适用于 CSS 所在的 shadowRoot 的 :host。如果您不将 CSS 放在 shadowRoot 中，那么这些将应用于正在使用的 shadowRoot，可能是 <body> 的 shadowRoot。

【解决方案3】：

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

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

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

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

第二种解决方案：html 模板

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

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

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

【讨论】：