Encapsulating Web Components using the shadow DOM

What is Shadow dom?

First we'll look at what it looks like. In HTML5, we can use the <video> tag to create a browser-brought visual player control using only the following simple two lines of code.

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

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

But why can't we see their internal structure in the DOM? Oh, actually the browser hides them through some kind of technology, but we can see these structures by checking the Show User Agent Shadow DOM through the DevTools settings. After checking, we found #shadow-root (user-agent) in the <video> tag, which contains the internal DOM structure of the video control, which is called the Shadow Dom .

And the shadow DOM provides us with 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 internal implementation of the control by shadow the DOM, we don't have to worry about the control having to do with the style sheet modification.

Let's take a look at how to encapsulate a control by shadow Dom.

Using the Shadow Dom wrapper control

First, let's look at the description of the Shadow Dom :

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

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

A Shadow root is the root node of a shadow tree.

These three words tell us:

• -The shadow DOM consists of one or more shadow tree, and requires a common DOM element as its container
• -Shadow tree is a node
• -Shadow root is the root node of the shadow tree

Below, we go directly through an example of how to encapsulate a Web Component using the Shadow DOM:

Dom:

//Templates<TemplateID= "Wgtemplate">  <style>color: #fff;  Background: #006dcc; </style>  <Buttontype= "button"class= "BTN">Button Widget</Button></Template>//Shadow DOM container<DivID= "My-widget"></Div>

Js:

//Create Shadow Dom<Scripttype= ' Text/javascript '>  varHost=Document.queryselector ("#my-widget")  varTP=Document.queryselector ("#wgTemplate")  varClone=Document.importnode (tp.content,true) Host.createshadowroot (). appendchild (clone)</Script>

1. The first step we need is a shadow DOM container <Div id= "My-widget"></Div >
2. The template for the control is then retrieved via document.importnode () and cloned
3. Then use createshadowroot () to create a shadow root as the root node of the shadow tree
4. Finally, insert the template content clone as Shadow tree into shadow root

To open the page, we can see the following structure, which is a simple example of using shadow to hide the internal implementation of the control.

Then we can also encapsulate the custom control By combining the previous article, "Custom element of Web Component," to create custom elements:

Dom:

//Templates<TemplateID= "Wgtemplate">  <style>. BTN{Color:#fff;background:#006dcc;    }  </style>  <Buttontype= "button"class= "BTN">Custom Button Widget</Button></Template>

Js:

 //To create a custom control<script type= ' Text/javascript ' >varProto =object.create (Htmlelement.prototype, {createdcallback: {value:function() {        varTP = Document.queryselector (' #wgTemplate ')        varClone = Document.importnode (Tp.content,true)         This. Createshadowroot (). appendchild (Clone)}} })  varMybuttom = document.registerelement (' My-buttom '), {Prototype:proto}) Document.body.appendChild (NewMybuttom ())</script>

Encapsulating Web Components using the shadow DOM