阴影 dom children 没有出现在 DOM

Question

我的目标是在测试 ID 中创建阴影 DOM。但是，我的影子DOM有children的问题没有出现在DOM

<body>
    <p>
      The application of braces moves the teeth as a result of force and
      pressure on the teeth. There are traditionally four basic elements used:
      brackets, bonding material, arch wire, and ligature elastic (also called
      an “O-ring”). The teeth move when the arch wire puts pressure on the
      brackets and teeth. Sometimes springs or rubber bands are used to put more
      force in a specific direction.[medical citation needed][1] Braces have
      constant pressure which, over time, move teeth into the desired positions.
      The process loosens the tooth after which new bone grows in to support the
      tooth in its new position. This is called bone remodeling. Bone remodeling
      is a biomechanical process responsible for making bones stronger in
      response to sustained load-bearing activity and weaker in the absence of
      carrying a load. Bones are made of cells called osteoclasts and
      osteoblasts. Two different kinds of bone resorption are possible: direct
      resorption, which starts from the lining cells of the alveolar bone, and
      indirect or retrograde resorption, which occurs when the periodontal
      ligament has been subjected to an excessive amount and duration of
      compressive stress.[2] Another important factor associated with tooth
      movement is bone deposition. Bone deposition occurs in the distracted
      periodontal ligament. Without bone deposition, the tooth will loosen, and
      voids will occur distal to the direction of tooth movement.[3]
    </p>

    <div id="test">Test</div>

我的javascript代码

let test = document.getElementById("test");
  test.attachShadow({ mode: "open" });
  let shadowHeader = document.createElement("p");
  shadowHeader.className = "kit-header";
  shadowHeader.innerText = "This is header";

  let shadowBody = document.createElement("SPAN");
  shadowBody.className = "kit-body";

  test.appendChild(shadowHeader);
  test.appendChild(shadowBody);

结果

如图所示。我无法展开

#Shadowroot(Open)

Answer 1

<div id="test">Test</div>

let test = document.getElementById("test");
  test.attachShadow({ mode: "open" });
  let shadowHeader = document.createElement("p");
  shadowHeader.className = "kit-header";
  shadowHeader.innerText = "This is header";

  let shadowBody = document.createElement("SPAN");
  shadowBody.className = "kit-body";

  test.appendChild(shadowHeader);
  test.appendChild(shadowBody);

你追加在test，而不是在shadowRoot里面test，那个引用是：test.shadowRoot

... 现代浏览器有 append 方法来追加多个元素

<div id="test">Test</div>

<script>
  let test = document.getElementById("test");
  test.attachShadow({ mode: "open" });
  let shadowHeader = document.createElement("p");
  shadowHeader.className = "kit-header";
  shadowHeader.innerText = "This is header";

  let shadowBody = document.createElement("SPAN");
  shadowBody.className = "kit-body";
  shadowBody.innerText = "kit-body";

  test.shadowRoot.append(shadowHeader,shadowBody);
</script>

您可能想更进一步，使它成为一个合适的 Web 组件：

<kit-card>
  <h1 slot="header">I am Kit</h1>
</kit-card>

<script>
customElements.define("kit-card",class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"})
           .innerHTML = `<style>p{font-size:20px}span{background:beige}</style>
                         <p><slot name="header">This is header</slot></p>
                         <span><slot name="body">kit-body</slot></span>`
  }
});
</script>

阴影 dom children 没有出现在 DOM

Shadow dom children not appeared in DOM

javascript

shadow-dom

chrome-extension-manifest-v3