Search code examples
javascriptshadow-domchrome-extension-manifest-v3

Shadow dom children not appeared in DOM

My goal there is I want to create a shadow DOM in test ID. However, the problem there is children of my shadow DOM was not appeared in 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>

My javascript code

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

The result enter image description here

As you can see in the picture. I can't expand the

#Shadowroot(Open)

Solution

  • <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);

    You append on test, Not on the shadowRoot inside test, that reference is: test.shadowRoot

    ... and modern browsers have the append method, to append multiple elements

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

    You might want to take it one step further, and make it a proper Web Component:

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