可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

The code is

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

and the jsfiddle link is https://jsfiddle.net/o5r229hf/

I have declared div id 1 as a shadow dom but div id 2 and 3 are getting the style. Could there be something with the order that i am have written the elements?

回答1:

You are creating the <style> tag as a child to the <div id="1"> and not as a child of the shadow DOM. So the <style> exists outside the the shadow that you created.

The CSS must exist inside the shadowRoot to affect elements within that shadowRoot.

Any CSS outside a shadowRoot is not supposed to affect the elements inside the shadowRoot. One minor exception is when using slots.

If your code is limited to what you are showing above then you need to move the CSS into the shadowRoot by doing something like this:

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>

What this does is copies the children of <div id="1"> into the shadowRoot that you created.

This moves the <style> tag inside which makes it only affect that <div> and no others.

If your code is not limited to something like you have above then just create the CSS as a child of the shadowRoot.

UPDATE:

Even if your code isn't in shadow DOM you might need to add your CSS into your container's shadow DOM. Here is how to handle that.

回答2:

Using shadow DOM, you can target the parent element in the CSS with :host:

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

However, shadow DOM is not properly handled yet, even by the most recent browsers.

Source: https://developer.mozilla.org/fr/docs/Web/CSS/:host

回答3:

1st solution: template literals

Define the <style> element directly in the shadow dom:

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>

2nd solution: html template

Define all the content of you shadow dom in a <template> tag and then insert it in the 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>