“This is the second day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

The preface

Recently, I have learned about plug-in related things, and I have learned many engineering related technologies. Today, we are going to learn one of them, Web Components.

To learn a knowledge, we should first understand what it is, what problems it solves and why we should learn it. Today we will learn Web Components, which translates as: Web Components, but Web Components are not a single specification, but a series of technical Components. Including template, Custom Element, Shadow DOM, HTML Import four technical specifications.

template

A tag represents a code template for some recurring part of a web page. It exists in the DOM, but is not visible on the page.

The characteristics of

Wrapped in the
tag, which contains many slots and variables to make page elements reusable. Usually solve the reuse problem of duplicate HTML code.

Began to try

The following code checks to see if the browser supports the template tag, and you can copy it to the console to try it out.

function supportsTemplate() { return 'content' in document.createElement('template'); } if (supportsTemplate()) {console.log(' browser supported ')} else {console.log(' browser not supported ')}Copy the code

document.importNode()

For template templates on other pages, you can make document.importNode().

For example, you want to get a node in an iframe. You can use the following method to obtain the element node, and you may wonder why not add the element node directly, because if it is a template from another page, it must be imported by document.importNode. Example:

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
Copy the code

The external document node must be ready with the document.importNode method before being inserted. The document.importNode method takes two arguments, the first is the DOM node of the external document, and the second is a Boolean value indicating whether to clone along with the child nodes, which defaults to false. In most cases, you must explicitly set the second argument to true.

Shadow DOM

Shadow DOM refers to the fact that the browser encapsulates templates, style sheets, attributes, JavaScript code, etc., into an independent DOM element. External Settings cannot affect the internal DOM element, and internal Settings do not affect the external DOM element.

The Shadow DOM element must be dependent on an existing DOM element, created using the createShadowRoot method, and then inserted into the element.

By using the innerHTML attribute, it can be Shadow DOM.

var shadowRoot = element.createShadowRoot(); shadowRoot.innerHTML = '<p>Here is some new text</p>'; shadowRoot.innerHTML += '<style>p { color: red }; </style>'; document.body.appendChild(shadowRoot);Copy the code

Let’s look at another case to get a feel for it

<div id="nameTag">coolFish</div>

<template id="nameTagTemplate">
  <style>
    .outer {
      border: 2px solid brown;
    }
  </style>

  <div class="outer">
    <div class="boilerplate">
      Hi! My name is
    </div>
    <div class="name">
      coolFish
    </div>
  </div>
</template>
Copy the code

Above is a div element and a template. Next we apply the template to the div.

var shadow = document.querySelector('#nameTag').createShadowRoot();
var template = document.querySelector('#nameTagTemplate');
shadow.appendChild(template.content.cloneNode(true));
Copy the code

The root element of the Shadow DOM created using createShadowRoot, and the element constructed on this node, the Shadow DOM, has style method isolation.

summary

  1. The emergence of template is to solve the problem of repeated code of HTML page elements, so that the same structure, different data OF THE HTML code can be reused.
  2. Note that this parameter is required if the node on another page is useddocument.importNodeYou can use it only after importing it. The method takes two arguments, the first being the node and the second whether to clone the child nodes under that node.