Custom Elements | Web Components | Amit Padhiyar (Saatody)

CustomElementRegistry

The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. But, The CustomElementRegistry function, which is currently experimental (Expect behavior to change in the future). The CustomElementRegistry is available through the window.customElements property.

Methods

In my browser, The CustomElementRegistry can't work properly. So i will not use this property and i recommended window.customElements instead of CustomElementRegistry.

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

window.customElements

The customElements read-only property of the Window interface returns a reference to the CustomElementRegistry object, which can be used to register new custom elements and get information about previously registered custom elements.

How to check the window.customElements return CustomElementRegistry?

There is simple trick. Return window.customElements in alert() box. Checkout below example.

Program:
<script>
    alert(window.customElements);
</script>

Output:
[object CustomElementRegistry]

Before create custom elements, We need to understand some functions of the window.customElements. We already know that the window.customElements returns CustomElementRegistry object as above example. So, We use indirectly CustomElementRegistry functions. There are four functions and those function list i already give at CustomElementRegistry methods. But, Here we will discuss in detail.

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

CustomElementRegistry.define()

The define() method of the CustomElementRegistry interface defines a new custom element. There are two types of custom elements you can create.

Autonomous custom element: Standalone elements; they don't inherit from built-in HTML elements.
Customized built-in element: These elements inherit from and extend built-in HTML elements.

# Syntax:
window.customElements.define(name, constructor, options);

# Parameters:
name: Name for the new custom element. Note that custom element names must contain a (-) hyphen symbol.
constructor: Constructor for the new custom element.
options: This is optional parameter. The Object that controls how the element is defined. One option is currently supported: extends.
    extends: String specifying the name of a built-in element to extend. Used to create a customized built-in element.

CustomElementRegistry.get()

The get() method of the CustomElementRegistry interface returns the constructor for a previously-defined custom element.

# Syntax:
constructor = window.customElements.get(name);

# Parameters:
name: The name of the custom element whose constructor you want to return a reference to.

CustomElementRegistry.upgrade()

The upgrade() method of the CustomElementRegistry interface upgrades all shadow-containing custom elements in a Node subtree, even before they are connected to the main document.

# Syntax:
window.customElements.upgrade(root);

# Parameters:
root: A Node instance with shadow-containing descendant elements that are to be upgraded. If there are no descendant elements that can be upgraded, no error is thrown.

CustomElementRegistry.whenDefined()

The whenDefined() method of the CustomElementRegistry interface returns a Promise that resolves when the named element is defined.

# Syntax:
Promise<> customElements.whenDefined(name);

# Parameters:
name: Custom element name.

# Return value:
A Promise that resolves to undefined when the custom element is defined. If the custom element is already defined, the promise is resolved immediately.

Let's create custom element by simple program. Here we use only define method. So first we need to define class and which is inherit from HTMLElement.

class HelloMSG extends HTMLElement{
    constructor(){
        super();
        
        this.innerHTML = "Hello Saatody!<br/>";
    }
}

Now define, define() function. This define() function register our custom element to our page. There are four ways and those all ways are right.

let CustomElementRegistry = window.customElements;
CustomElementRegistry.define("hello-msg", HelloMSG);

//OR
let CustomElementRegistry = customElements;
CustomElementRegistry.define("hello-msg", HelloMSG);

//OR
window.customElements.define("hello-msg", HelloMSG);

//OR
customElements.define("hello-msg", HelloMSG);

Note that the define() function must be use after create class. To overcome this complexity, We have another great way to create custom element.

window.customElements.define("hello-msg",
class HelloMSG extends HTMLElement{
    constructor(){
        super();
        
        this.innerHTML = "Hello Saatody!<br/>";
    }
});

// OR
window.customElements.define("hello-msg",
class extends HTMLElement{
    constructor(){
        super();
        
        this.innerHTML = "Hello Saatody!<br/>";
    }
});

Now your custom element is ready for use inside your HTML page. Now see the below example. Here you need to just call custom element to your page in <body> tag and see the magic output in browser.

HTML Code:
<hello-msg></hello-msg>
<hello-msg></hello-msg>
<hello-msg>Even Try To Overwrite This String.</hello-msg>

Output:
Hello Saatody!
Hello Saatody!
Hello Saatody!

Full example is below

HTML Code:
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <hello-msg></hello-msg>
        <hello-msg></hello-msg>
        <hello-msg>Even Try To Overwrite This String.</hello-msg>
        
        <script>
            window.customElements.define("hello-msg",
            class HelloMSG extends HTMLElement{
                constructor(){
                    super();
                    this.innerHTML = "Hello Saatody!<br/>";
                }
            });
        </script>
    </body>
</html>

Output:
Hello Saatody!
Hello Saatody!
Hello Saatody!