Why should we register a custom item

Question

When we use polymer or x-tag, we must register a new element. But why, if we can use simple es6 javascript to create a shady component without registerElement. This works great in recent versions of Chrome, Firefox and Edge without polyfill or forwarding to es5.

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

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

I use this function for instances of the init (mount) component class:

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

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 - Man Without a Frame

and Registration Items :

Before you can use a custom item, you must register it. Otherwise, the browser considers this an HTMLElement. Value?

Update - Updated W3C specifications today, March 18, 2016:

2.1 :

DOM. , , , . , , .

Answer 1

:

• blob html
  , blob .
• 
  , AComponent, createdCallback, , DOM-. mountCustomElement .

, , - attachedCallback detachedCallback: , DOM .
- attributeChangedCallback: , .

mutationObservers .. , , .

, . HTMLElement. ?

, , , . , html-, , .