Why do we have to register a custom element

Viewed 556

When we use polymer or x-tag, we have to register a new element. But why, if we can use plain es6 javascript to build a shady component without the registerElement. This works fine in the latest versions of Chrome, Firefox and Edge without a polyfill or transpiling to es5.

<a-custom-element id="aid"></a-custom-element>

<template id="a-custom-element">  
    ....  // html
</template>

I use this function to init (mount) component class instances:

function mountCustomElement(custom_tag, custom_class) {
    Array.from(document.querySelectorAll(custom_tag)).forEach((element) => {
            new custom_class(element, custom_tag);
    });
}
document.addEventListener("DOMContentLoaded", function () {
    ....
    mountCustomElement('a-custom-element', AComponent);
    ....
}); 

The component class :

class AComponent {             // without the extend HTMLElement !!
    constructor(custom_element, template_id) {

        this.id = custom_element.id;
        let content = document.querySelector(`#${template_id}`).content;
        // for easy inspection
        AComponent.hasOwnProperty('instances') ?Acomponent.instances.push(this) :AComponent.instances = [this];

        ....
        let $root = document.querySelector(`#${this.id}`);
        $root.appendChild(document.importNode(content, true));
        ....
    }

See also: ES6 Web Components – A Man Without a Framework

and Element registration:

Before you can use a custom element, it needs to be registered. Otherwise, the browser considers it an HTMLElement. Meaning ?

Update - the W3C specs were updated Today 18 March 2016 :

From the 2.1 introduction:

Custom elements provide a way for authors to build their own fully-featured DOM elements. Although authors could always use non-standard tag names in their documents, with application-specific behavior added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes.

1 Answers
Related