Web Components Series (3) - Creating Custom Elements - 前端三昧

foreword

From the previous introduction, we know that custom elements can be divided into two categories based on whether they inherit basic HTML elements or not"

Autonomous custom elements Autonomous custom elements
Customized built-in elements Customized built-in elements

This raises a question: what is the difference between the two in use?

Let me try to explain the problem through this article.

Autonomous custom elements

Self-customized elements are independent elements that do not inherit other built-in HTML elements.

You can directly write them in the form of HTML tags to use on the page. For example, <my-card> , or document.createElement("my-card") .

Example

Below is an example of creating and using Autonomous custom elements :

<!-- index.html -->
<body>
    <my-card></my-card>
    <script src="./index.js"></script>
</body>

// index.js
class MyCard extends HTMLElement {
    constructor() {
        super();
        let shadow = this.attachShadow({ mode: "open" });

        let containerEle = document.createElement("div");
        containerEle.style.display = "flex";
        containerEle.style.flexDirection = "column"
        containerEle.style.margin = "100px";
        containerEle.style.border = "1px solid #aaa";

        const headerEle = document.createElement("div");
        headerEle.innerText = "名片";
        headerEle.style.height = "20px";
        headerEle.style.padding = "10px";
        headerEle.style.borderBottom = "1px solid blue";

        const bodyEle = document.createElement("div");
        bodyEle.innerText = "姓名：编程三昧";
        bodyEle.style.padding = "10px";

        containerEle.appendChild(headerEle);
        containerEle.appendChild(bodyEle);
        shadow.appendChild(containerEle);
    }
}

customElements.define("my-card", MyCard);

The effect is as follows:

Open the developer tools and view the DOM structure, as shown in the following figure:

try one

Then, I tried to change the parameter of the registration interface to customElements.define("my-card", MyCard, {extends: "p"}); , but the page does not display and there is no error message.

try two

If you change the MyCard class to inherit from HTMLDivElement, that is:

// index.js
class MyCard extends HTMLDivElement{
    constructor(){
        super();
        ……
    }
}
……

There is an error on the page:

try three

Add the following code at the end of the custom element's constructor:

this.style.display = "block";
this.style.border = "2px solid #aaa";

The border is added successfully. It should be noted here that the style display inherited from HTMLElement is set to inline. If the value of display is not reset, the style effect will not be displayed.

Customized built-in elements

Inherited from basic HTML elements. When creating, you must specify the element to be extended. When using, you need to write the basic element tag first, and specify the name of the custom element through the is attribute. For example <p is="my-card"> , or document.createElement("p", { is: "my-card" }) .

Example

Here is an example using Customized built-in elements :

<!--index.html-->

<body>
    <div is="my-card"></div>
    <script src="./index.js"></script>
</body>

// index.js

class MyCard extends HTMLDivElement {
    constructor() {
        super();
        let shadow = this.attachShadow({ mode: "open" });

        let containerEle = document.createElement("div");
        containerEle.style.display = "flex";
        containerEle.style.flexDirection = "column"
        containerEle.style.margin = "100px";
        containerEle.style.border = "1px solid #aaa";

        const headerEle = document.createElement("div");
        headerEle.innerText = "名片";
        headerEle.style.height = "20px";
        headerEle.style.padding = "10px";
        headerEle.style.borderBottom = "1px solid blue";

        const bodyEle = document.createElement("div");
        bodyEle.innerText = "姓名：编程三昧";
        bodyEle.style.padding = "10px";

        containerEle.appendChild(headerEle);
        containerEle.appendChild(bodyEle);
        shadow.appendChild(containerEle);
    }
}

customElements.define("my-card", MyCard, {extends: "div"});

The effect is the same as that of Autonomous custom elements , and its DOM structure is as follows:

try one

If only the index.html tag is used in my-card , nothing shows up.

try two

If the HTMLDivElement in the parent class is changed to HTMLElement, the page will report an error:

try three

If the third parameter of customElements.define() is removed, there will be no error and no page display.

Summarize

Based on the above, it can be concluded as follows:

The constructor of Autonomous custom elements can only inherit HTMLElement, and the third parameter is not required when calling customElements.define() method;
HTML can directly use the tag name defined by Autonomous custom elements ;
The display value of Autonomous custom elements style is inline by default, and can be reset if necessary;
Customized built-in elements The constructor of can generally only inherit the available basic HTML tag classes, and the third parameter must be passed when calling customElements.define() method. The third parameter is generally: {extends: "tag name" } ;
When using Customized built-in elements directly in HTML, you need to inherit the basic tag name of the class + is="custom tag name" through the component constructor.

~

~ This article is over, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and shape interesting souls!
Hello everyone, I'm King , the author of 〖 Programming Samadhi 〗, my official account is " Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!

Web Components Series (3) - Creating Custom Elements

foreword

Autonomous custom elements

Example

try one

try two

try three

Customized built-in elements

Example

try one

try two

try three

Summarize

编程三昧

`引用和评论`

系统学习 TypeScript（六）——认识接口

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号