“This is the 19th day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Antecedents to review

  • In a previous article, we mentioned that Web Compontens is a set of technologies that native JavaScript already supports component encapsulation. It consists of three main technologies: custom elements, HTML templates, and shadow DOM
  • Then we also looked at custom elements, templates, and slots
  • This article introduces you to the Shadom dom that you used in the previous demo

shadom dom

  • It is the API provided by native javascript
  • You can add a separate, hidden DOM structure to an ordinary DOM node, either as a DOM tree or as a set of function-specific DOM structures
  • The DOM structure added is similar to being in a sandbox environment, and the style of the internal element does not affect the style of the external element
  • We call it the shadom dom. Here are some definitions of the shadom
    • A Shadow Host is a regular DOM node to which the Shadow DOM is attached, acting as a Host element
    • Shadow Tree refers to the DOM Tree structure inside the Shadow DOM
    • Shadow Root refers to the Root node of the Shadow Tree
    • Shadow Boundary refers to the Boundary of the Shadow DOM. This is where the Shadom ends and the following regular DOM begins
  • So let’s write a demo to get a feel for shadom dom
<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>

  <body>
    <my-com myTitle="myCom-title">
      <div>my-com template</div>
      <span slot="s1">This is the s1 named slot</span>
      <span slot="s2">This is the s2 named slot</span>
      <span slot="s3">This is the S3 named slot</span>
    </my-com>

    <hr />

    <div>other</div>
  </body>

  <script>
    class MyCom extends HTMLElement {
      constructor() {
        super(a);console.log(this);

        // props
        const title = this.getAttribute("myTitle");

        // Template, slot, shadow dom
        const templateDom = document.createElement("template");
        templateDom.innerHTML = ` <style> div{ background: teal; } </style> <div> <h2 class="title"> Template demo title:${title}</h2> 2222- [<slot name=" S2 "></slot>] -2222 <br /> 3333- [<slot name=" S3 "></slot>] -3333 <br /> 1111- [<slot name=" S3 "></slot> Name ="s1"></slot>】-1111 </div> ';

        const divTemplate = templateDom.content;

        // let shadowDom = this.attachShadow({ mode: "closed" }); 
        let shadowDom = this.attachShadow({ mode: "open" }); 
        
        shadowDom.append(divTemplate);
      }
    }

    customElements.define("my-com", MyCom);
  </script>
</html>
Copy the code
  • Here is what the page looks like

  • The code doesn’t change much, but it does change a bit from the code in the previous article

  • We’ve styled the internal Shadom a little bit

    • Give the inner div a background color of Teal
    • Normally, the background color of the external div will also be set to Teal
    • But because the internal Shadom dom is hidden from the outside, it resembles a sandbox environment
    • So the style of the internal shadom dom doesn’t affect the external elements

  • Element.attachShadom is the key API for adding the Shadom

    • This method takes an object with an attribute, mode
      • A value of “open” means that the corresponding Shadom can be obtained through JavaScript methods within the page
      • A value of “closed” means that JavaScript cannot be used to obtain the corresponding Shadom on the page
    • So let’s print the Shadom dom
let shadowDom = this.attachShadow({ mode: "open" });
console.log(shadowDom);
Copy the code

let shadowDom = this.attachShadow({ mode: "closed" });
console.log(shadowDom);
Copy the code

summary

  • The basic usage of the Shadom is covered here
  • In the next article, I’ll put together the three components of the Web Component and try to write a popover component

The last

  • That’s all for today’s sharing, and you’re welcome to discuss it in the comments section 👏.
  • If you feel that the article is written well, I hope you do not begrudge praise, everyone’s encouragement is the biggest power I share 🥰