“This is the 25th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

In the previous code that described creating Custom Elements, there was one area that was a bit tedious: each child element in the Shadow DOM was created using the document.createElement method. Something like this:

Is there a way to simplify this step? The answer is: Template.

The concept of Templates

To quote MDN:

The HTML content template (

Think of a template as a piece of content that can be stored in a document for later use. While the parser does process the contents of the **

Through this conceptual explanation, we can learn a few things about Templates:

  • It is a set of element tags used in HTML pages, i.e<template></template>;
  • It is processed during HTML page parsing, but not rendered on the page;
  • It can be retrieved by JavaScript.

Templates is older than Web Components.

The properties of Templates

In addition to the global attribute (that is, the one shared by all HTML elements), Templates has only one private attribute: Content, which is read-only and returns the document fragment object inside Templates and its DOM structure.

Take a look at template on the console and see the following:

We can use templateele. content as a normal Document object.

Simply use Templates

Only HTML + Templates

<body>
    <h1>The use of Templates</h1>
    <template>
        <div>This is the content of the child node within the Template tag</div>
    </template>
</body>
Copy the code

The page is displayed as follows:

It fits both: parsed and not rendered.

Use JS

If you want to load the node content in Templates to the current page, you can use the following javascript code:

// Get the template element
const templateEle = document.querySelector("template");
// Get the document fragment contained in the template element
const content = templateEle.content;
// Content can be used as a normal document
const node = content.querySelector("div");
// Appends the node to the current document
document.body.appendChild(node);
Copy the code

The final effect is as follows:

There is a flaw, however, in that the div node inside Templates disappears because the div inside the Templates snippet is appended to the current document structure.

To avoid modifying the DOM structure inside the content template, we can clone the element nodes inside the template and then trace the cloned nodes back to the current document:

// Get the template element
const templateEle = document.querySelector("template");
// Get the document fragment contained in the template element
const content = templateEle.content;
// Content can be used as a normal document
const node = content.querySelector("div");
// Import node into the current document
// There must be this step
const cloneNode = document.importNode(node, true);
// cloneNode can also be used
// const cloneNode = node.cloneNode(true);
// Appends the node to the current document
document.body.appendChild(cloneNode);
Copy the code

Templates compatibility

conclusion

Templates allows you to pre-wrap and store some page content on an HTML page without rendering, and then manipulate Templates with JS.

So that’s about Templates.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!