15

This is actually more a question about the object-orientation model in ES6. However I am going to use the creation of a new custom element as an example.

So the new and shiny (as of today) method to create a new custom element is via customElements.define() which take in a tag name, a constructor, and options (which is optional) according to MDN, Google, and of course the spec. All the documentation listed uses a variation of the new class keyword for constructor.

Assuming I don't like the new class syntax, and considering for most part class is a syntatic sugar (according to this tutorial). The spec even specifically state that

A parameter-less call to super() must be the first statement in the constructor body, to establish the correct prototype chain and this value before any further code is run.

By reading the tutorial I came out with this to try if it is possible (also to revise and re-learn Javascript's object model).

var _extends = function(_parent) {
    var _result = function() {
        _parent.call(this);
    };
    _result.prototype = Object.create(_parent.prototype);
    Object.defineProperty(_result.constructor, 'constructor', {
        enumerable: false,
        writeable: true,
        value: _result
    });

    return _result;
};

customElements.define('foo-bar', _extends(HTMLElement));
console.log(document.createElement('foo-bar'));

I am getting this error

Error: The custom element being constructed was not registered with customElements.

So my question is, is it possible to do it without using class keyword (also without new if possible)? If the answer is no, should I stick to the class keyword instead of using Object.create when I write new Javascript code in the future?

Supersharp
  • 29,002
  • 9
  • 92
  • 134
Jeffrey04
  • 6,138
  • 12
  • 45
  • 68

1 Answers1

16

In some simple situations it is possible to define a custom element without the class keyword.

The trick is to use Reflect.construct() to replace the super() call.

var CEo = function ()
{
    console.log( "created" )
    return Reflect.construct( HTMLElement, [], CEo )
}

CEo.prototype = Object.create( HTMLElement.prototype )

CEo.prototype.connectedCallback = function ()
{
    console.log( "connected" )
    this.innerHTML = "Hello v1"
} 

customElements.define( "object-v1", CEo )

Note that it's a not a supported syntax because, as you stated, ES6 classes are a little more than just syntaxic sugar.

Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • LOL, that's good to know. Nah, not gonna do that, I don't feel like explaining why it works this way to future collaborators. Guess from now on I write only `class` to avoid confusion. – Jeffrey04 Sep 07 '17 at 04:14
  • At first I tried to define custom elements with Object instead of class but in the end I had to switch to class anyways... – Supersharp Sep 07 '17 at 16:04
  • 1
    this prompted me to go back and revise/relearn the object model in javascript ): – Jeffrey04 Sep 08 '17 at 05:37