Why do we have to register a custom element

Question

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.

Answer 1

Custom elements provide following features:

1. Provide an abstraction for a blob of html
   You have achieved this by using a tag and appending your blob to component manually.
2. Custom lifecycle callbacks
   What is being done inside constructor of AComponent class can be moved inside createdCallback and it will be executed whenever your custom tag is encountered by DOM renderer. No need to call mountCustomElement yourself.

Custom elements provide you other utilities such as
- attachedCallback and detachedCallback: What to do when your component is attached to the DOM and removed from it.
- attributeChangedCallback: What to do when one of the attributes on your element is modified.

All of these things ideally can be done using mutationObservers and such. But custom elements give you a package which has a native support for all of it using simple callbacks and would be difficult to implement otherwise.

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

Your callbacks won't be fired, any public function you attach to your component's prototype won't be available. Essentially you'll have an html tag with which browser won't know what to do.