Template in Web Component

This is the 8th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.

preface

Web Components are a different set of technologies that allow us to create reusable custom elements whose functionality is encapsulated outside of your code and use them in our Web applications.

In our usual development, we all know to reuse code as much as possible. Web Components are custom elements used to create wrapper functionality that can then be reused where specified.

It consists of three main technologies:

1. Custom elements 2. Shadow DOM 3.

This article will focus on HTML Templates, which are the basis of the vUE framework we use all the time.

What is the Template

The

Template works the same way in a Web Component. The HTML it creates is not displayed when the page is loaded. In this case, we can create a bunch of template tags to hold the view and render it with JAVASCRIPT scripts when needed. Implement an effect that loads on demand

Like under normal circumstances

<! -- <template> -->
    <img src="Https://img1.baidu.com/it/u=940811906, 4152926232 & FM = 26 & FMT = auto" alt="Load failed">
<! -- </template> -->
Copy the code

An image will display in the browser:

A package made with the

Why use Template

Before we get there, let’s talk about the implementation of Web Components. How do you turn a custom element into a Web Components

1. Customize an HTML tag

<user-card></user-card>
Copy the code

Note that custom elements must contain lines to distinguish them from native HTML tags

2. Add content to this custom element

Start by defining a class that inherits HTMLElement so that it can have the properties of an HTML element

class UserCard extends HTMLElement {
    constructor() {
        super();
    }
}
Copy the code

Then add content to the class and bind the class to the custom tag so that the contents of the class are reflected in the custom tag. The binding process uses the browser’s native customElements.define() method.

class UserCard extends HTMLElement {
    constructor() {
        super(a);let box = document.createElement('div');
        box.classList.add('box');

        let image = document.createElement('img');
        image.src = 'https://img1.baidu.com/it/u=940811906, 4152926232 & FM = 26 & FMT = auto';
        image.classList.add('image');

        let name = document.createElement('p');
        name.classList.add('name');
        name.innerText = 'zhangsan';

        let age = document.createElement('p');
        age.classList.add('email');
        age.innerText = '18';

        let button = document.createElement('button');
        button.classList.add('button');
        button.innerText = 'Follow';

        this.append(box); box.append(image, name, age, button); }}window.customElements.define('user-card', UserCard);// Bind the class to the custom tag
Copy the code

The last this in the class represents the custom element. After that, the DOM structure of the page has been generated, and you can add some CSS styles, where the CSS code is not displayed

This is a simple way to implement a custom tag. Then,

Use 3.<template>To complete the above style

We can define

<template id="userCardTemplate">
    <div class="box">
        <img src="Https://img1.baidu.com/it/u=940811906, 4152926232 & FM = 26 & FMT = auto" class="image">
        <p class="name">zhangsan</p>
        <p class="age">18</p>
        <button class="button">Follow</button>
    </div>
</template>
Copy the code

Then add it to the custom tag. Note that the style stored in

class UserCard extends HTMLElement {
    constructor() {
        super(a);var templateElem = document.getElementById('userCardTemplate');
        var content = templateElem.content.cloneNode(true);
        this.appendChild(content); }}Copy the code

You can see it up here. Use it<template>Can reduce a large number of nodes in JS tedious operations, in case this component is very large, so using JS to describe is very troublesome

In 4.<template>Medium encapsulation style

<template id="userCardTemplate">
        <style>
        .box {
            width: 220px;
            background-color: rgb(180.180.180);
            margin: 20px auto;
            padding: 10px 0;
            border-radius: 8px;
        }
        img {
            display: block;
            width: 200px;
            height: 200px;
            margin: auto;
        }
        p {
            margin: 0;
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
        }
        button {
            display: block;
            margin: 10px auto;
            text-align: center;
            width: 100px;
            height: 30px;
            border: none;
            border-radius: 4px;
            background-color: rgb(81.199.253);
            color: #fff;
            font-weight: bold;
        }
        </style>
        <div class="box">
            <img src="Https://img1.baidu.com/it/u=940811906, 4152926232 & FM = 26 & FMT = auto" class="image">
            <p class="name">zhangsan</p>
            <p class="age">18</p>
            <button class="button">Follow</button>
        </div>
    </template>
Copy the code

There is an internal :host pseudo-class that can represent the element itself

Then within the class you can set the Shadow DOM to isolate the code in this part of the class. Here’s a brief description: Just set this.attachShadow() in the class:

var shadow = this.attachShadow( { mode: 'closed'|'open'});Copy the code

Close and open are closed to the public, respectively

conclusion

Using Web Component can easily encapsulate part of the code to achieve code reuse, reduce the writing of HTML code.

Refer to external article: < the template > : content template elements – HTML (hypertext markup language (HTML) | MDN web component template to create your own simple 】 SPA web application Components portal instance tutorial – nguyen other web logs