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

preface

I introduced the concept of Web Components in a previous article, learned that it is a way for browsers to support “componentization” natively, and learned that its technical Components are:

  • Custom Elements
  • Shadow DOM
  • HTML templates

Today, we’ll look at some of its technologies, Custom Element.

Meaning of Custom Elements

An important feature of the Web Components standard is that it enables developers to encapsulate the functionality of HTML pages as Custom Elements (custom tags), whereas developers would normally have to write a lot of long, deeply nested tags to implement the same functionality.

Custom Elements is the foundation and core of web page componentization.

Classification of Custom Elements

Custom Elements are divided into two classes, depending on whether the underlying HTML element is inherited.

Autonomous custom elements

Is a stand-alone element that does 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”).

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”}).

CustomElementRegistry object

We already know about the concept of custom tags, but how to use custom tags in real development? This is where the focus of Custom Elements, the CustomElementRegistry object, comes in.

To get an instance of it, use the window.customElements property. Its main functions are:

  • Register a custom tag for the page
  • Gets information about registered Custom Elements

Let’s look at the relevant methods for the CustomElementRegistry object:

As you can see, the CustomElementRegistry object contains four methods:

  • CustomElementRegistry.define()
  • CustomElementRegistry.get()
  • CustomElementRegistry.upgrade()
  • CustomElementRegistry.whenDefined()

Next, let’s look at the individual methods of the CustomElementRegistry object.

CustomElementRegistry.define()

It is used to define (create) a custom tag. The syntax is as follows:

customElements.define(name, constructor.options);
Copy the code

Parameter analysis:

  • nameCustom label name. Note: It cannot be a single word and must have a dash in it, such as:my-cardLike this.
  • constructorCustom element constructors that control elements’ presentation, behavior, life cycle, and so on.
  • optionsA containextendsProperty. This parameter is optional. It specifies which built-in element the created element inherits from, and can inherit from any built-in element.

The return value is undefined.

Example:

// Declare a custom tag constructor class
class MyCard extends HTMLParagraphElement{
    constructor(){
        super(a); ... }}// Register custom tags
customElements.define('my-card', MyCard, { extends: 'p' });
Copy the code

CustomElementRegistry.get()

This method is used to return the constructor of the previously defined custom tag. The syntax is as follows:

constructor = customElements.get(name);
Copy the code

Name represents the tag name of the custom tag constructor you want to get, and should also be in the form of a dash of words.

Constructor of a custom element with the specified name, or undefined if there is no custom element definition with that name.

Example:

// Call the get method
customElements.get("my-card");

// class MyCard extends HTMLParagraphElement{
// constructor(){
// super();
/ /}
// }

customElements.get("MyCard");
// undefined
Copy the code

CustomElementRegistry.upgrade()

This method updates all custom elements in the root subtree that contain the shadow DOM, even before they are loaded into the main document. The syntax is as follows:

customElements.upgrade(root);
Copy the code

Root represents a Node instance with a shaded descendant element to upgrade. If there are no descendant elements that can be upgraded, no errors are thrown.

The return value is undefined.

Do not call the upgrade method:

const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
console.log(el instanceof MyCard); // false
Copy the code

Call the upgrade method:

const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
customElements.upgrade(el);
console.log(el instanceof MyCard); // true
Copy the code

CustomElementRegistry.whenDefined()

Returns the promise that will be executed when a custom element is defined with the given name. If such a custom element has been defined, the returned promise is immediately executed. The syntax is as follows:

Promise<> customElements.whenDefined(name);
Copy the code

Name is still the name of the user-defined label.

Example 1:

class MyCard extends HTMLParagraphElement {
    constructor() {
        super(a); } } customElements.whenDefined("my-card").then(() = > {
    console.log('My-card is registered');
});
console.log("My-card before registration");
customElements.define("my-card", MyCard, { extends: "p" });
console.log("After registration of my card");

// my-card before registration
// my-card after registration
// My-card is registered
Copy the code

If the following code is executed again, the resolve method is executed immediately:

customElements.whenDefined("my-card").then((res) = > {
    console.log(res);
    console.log('My-card is registered');
});
// My-card is registered
Copy the code

conclusion

This is about Custom Elements, and I’ll cover the life cycle functions of Custom tags.

~

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!