Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between window.customElements.define() and document.registerElement()

I have been reading some tutorials about web components (native, no polymer). I have seen two ways to register components and I'm a bit confused what to use. For the second one I actually receive a typescript error in vscode: [ts] Property 'registerElement' does not exist on type 'Document'. Did you mean 'createElement'?

/**
 * App
 */
export class App extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = this.template;
    }

    get template() {
        return `
        <div>This is a div</div>
        `;
    }
}

// What is the difference between these two methods?
window.customElements.define('vs-app', App);
document.registerElement('vs-app', App);
like image 343
Adrian Moisa Avatar asked Sep 28 '17 19:09

Adrian Moisa


People also ask

What is window customElements?

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.

What is CustomElementRegistry?

The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window. customElements property.

What is document register element?

The document. registerElement() method registers a new custom element in the browser and returns a constructor for the new element. Note: This is an experimental technology. The browser you use it in must support Web Components. See Enabling Web Components in Firefox.

What is Web Components custom elements?

Custom elements allow web developers to define new HTML tags, extend existing ones, and create reusable web components.


1 Answers

In terms of results, they accomplish pretty much the same. However, Document.registerElement() is deprecated, so you should use CustomElementRegistry.define() instead.

In my eyes, the key difference is that .registerElement() returns a constructor for the new element, whereas .define() allows you to specify the constructor, allowing for greater versatility. Consider the folowing examples:

var MyElement = document.registerElement('me-me');
document.body.appendChild(new MyElement());
var myElement = document.getElementsByTagName('me-me')[0];
myElement.textContent = 'I am a custom element.';

class MyElement extends HTMLElement {
  connectedCallback() {
    this.textContent = 'I am a custom element.';
  }
}
customElements.define('me-me', MyElement);
document.body.appendChild(new MyElement());

As you can see, using .define() allows you to specify the inner text beforehand, whereas you have to manually specify the text in the case of .registerElement(). Provided this is a very simple example to showcase my point, using .define(), you can add a lot more to the default behavior, appearance and content of a custom element than you can with .registerElement().

like image 144
Angelos Chalaris Avatar answered Sep 27 '22 23:09

Angelos Chalaris