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

preface

From the previous introduction, we know that custom elements can be divided into two categories, depending on whether or not they inherit from base HTML elements.

  • Autonomous custom elementsCustom elements
  • Customized built-in elementsCustom built-in elements

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

Let me try to explain zh through this article. That’s the question.

Autonomous custom elements

Custom elements are independent elements that do not inherit from other built-in HTML elements.

You can write them directly as HTML tags to use on the page. For example,

, or document.createElement(“my-card”).

The sample

Here is an example of creating and using Autonomous Custom Elements:

<! -- index.html -->
<body>
    <my-card></my-card>
    <script src="./index.js"></script>
</body>
Copy the code
// index.js
class MyCard extends HTMLElement {
    constructor() {
        super(a);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 = "Business card";
        headerEle.style.height = "20px";
        headerEle.style.padding = "10px";
        headerEle.style.borderBottom = "1px solid blue";

        const bodyEle = document.createElement("div");
        bodyEle.innerText = "Name: Programming Samadhi";
        bodyEle.style.padding = "10px";

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

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

The effects are as follows:

Open the developer tool and view the DOM structure as shown below:

Try a

Then I tried to change the registration interface pass parameter to customElements. Define (“my-card”, MyCard, {extends: “p”}); As a result, the page is not displayed and there is no error message.

try

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

// index.js
class MyCard extends HTMLDivElement{
	constructor(){
		super(a); ... }}...Copy the code

Page error:

Try to three

Add the following code to the end of the constructor for the custom element:

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

The style display inherited from HTMLElement is set to inline. If you do not reset the value of display, the style effect will not appear.

Customized built-in elements

Inheriting from basic HTML elements. At creation time, you must specify the element you want to extend. To use it, you must first write out the basic element tag and specify the name of the Custom Element with the IS attribute. For example,

, or document.createElement(“p”, {is: “my-card”}).

The sample

The following is an example of using Customized built-in elements:

<! --index.html-->

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

class MyCard extends HTMLDivElement {
    constructor() {
        super(a);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 = "Business card";
        headerEle.style.height = "20px";
        headerEle.style.padding = "10px";
        headerEle.style.borderBottom = "1px solid blue";

        const bodyEle = document.createElement("div");
        bodyEle.innerText = "Name: Programming Samadhi";
        bodyEle.style.padding = "10px";

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

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

The effect is the same as the Autonomous Custom Elements effect, with the DOM structure as follows:

Try a

If you use only the my-card tag in index. HTML, nothing is displayed.

try

Error: HTMLDivElement = HTMLElement

Try to three

If the third parameter of customElements.define() is removed, no error is reported and no page is displayed.

conclusion

In summary, it can be summarized as follows:

  • Autonomous custom elementsThe HTMLElement constructor can only be inherited and calledcustomElements.define()Method does not require a third parameter;
  • Used directly in HTMLAutonomous custom elementsDefine the tag name;
  • Autonomous custom elementsThe display value of the style defaults to inline and can be reset if desired.
  • Customized built-in elementsThe constructor of the HTML tag class can normally only inherit from the basic HTML tag class available and be calledcustomElements.define()The third argument must be passed to the method. The third argument is usually:{extends: "label name "};
  • Used directly in HTMLCustomized built-in elementsYou need to inherit the class’s base tag name + through the component constructorIs =" Custom tag name".

~

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!