Shadow Dom Introduction

What is the shadow dom.

First we'll look at what it looks like. In HTML5, we can create a video player control with a browser from the < videos > tags by simply writing the following two lines of code.

<video controls= "" >
    <source src= https://mdn.mozillademos.org/files/2587/AudioTest%20 (1). ogg "Type=" Audio/ogg ">
</video>

In each browser, it has a different appearance, such as the one in chrome that looks like this:

But why we can't see the structure inside them in the DOM. Well, browsers actually hide them through some kind of technology, but we can see these structures by checking the show User Agent Shadow DOM in the Devtools settings. After checking, we found #shadow-root (user-agent) in the < video > tag, which contains the inner DOM structure of the video control, which is called Shadow Dom.

And the shadow DOM provides us with a simple and efficient style isolation. If you try to influence the appearance of the control by input[type= a style such as "button"] {Display:none}, you will find that it is invalid. This way, if we hide the inner implementation of the control through the shadow DOM, we don't have to worry about the control being affected by modifying the style sheet.

Let's look at how to encapsulate the control through the shadow Dom. encapsulating controls using the shadow Dom

First, let's look at the description of the shadow DOM by the consortium:

A Shadow Host is A element that hosts one or more node trees.

A shadow tree was a node tree hosted by a shadow host.

A shadow root is the root node of shadow.

These three words tell us:-the shadow DOM consists of one or more shadow trees and requires an ordinary DOM element as its container-shadow tree is a node--shadow root is the root node of shadow

Below, we'll show you how to use the shadow DOM to encapsulate Web Components using an example directly: DOM:

Template
<template id= "Wgtemplate" >
  <style>
    color: #fff;
    Background: #006dcc;
  </style>
  <button type= "button" class= "btn" >button widget</button>
</template>
//Shadow DOM container
<div id= "My-widget" ></div>

JS:

Create Shadow Dom
<script type= ' text/javascript ' >
  var host = Document.queryselector ("#my-widget")
  var tp = document.queryselector ("#wgTemplate")
  var clone = Document.importnode (Tp.content, True)
  Host.createshadowroot (). appendchild (clone)
</script>

For the first step, we need a shadow Dom container < div id = "My-widget" ></div > then get to the control template and clone and then use Crea via Document.importnode () Teshadowroot () to create a Shadow RootAs Shadow TreeThe root node at the end of the template content clone as Shadow TreeInserted into Shadow RootIn

To open the page, we can see the following structure, which is one of the simplest examples of using shadow to hide controls internally.

We can then encapsulate the custom control by combining the method of creating the custom element in the "Web Component custom Elements" of the previous article: DOM:

Template
<template id= "Wgtemplate" >
  <style>
    btn {
      color: #fff;
      Background: #006dcc;
    }
  </style>
  <button type= "button" class= "btn" >custom button widget</button>
</template >

JS:

Create a custom control
<script type= ' text/javascript ' >
  var proto = Object.create (Htmlelement.prototype, {
    Createdcallback: {
      value:function () {
        var tp = document.queryselector (' #wgTemplate ')
        var clone = Document.importnode (Tp.content, True)
        this.createshadowroot (). appendchild (Clone)}}
  )

  var mybuttom = document.registerelement (' My-buttom ', {prototype:proto})
  
  Document.body.appendChild (New Mybuttom ())
</script>