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.
Custom elements provide following features:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With