クラスキーワードを使用せずにカスタム要素を作成する

Question

これは、実際にはES6のオブジェクト指向モデルに関する質問です。しかし、私は新しいカスタム要素の作成を例として使用するつもりです。

だから、新しいカスタム要素がMDNによるタグnameに取るcustomElements.define()、constructor、および（オプションである）options経由で作成する（今日のような）新しいと光沢のある方法、Google、そしてもちろんのspec。リストされているすべてのドキュメントには、constructorの新しいclassキーワードのバリエーションが使用されています。

私は新しいclassの構文が気に入らず、ほとんどの部分を考慮すると、classは（this tutorialによる）合成糖です。それが可能であればスペックでも、具体的

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.

チュートリアルを読むことによって、私がしようとするこれで出てきたと述べている（また、改訂とJavascriptのオブジェクトモデルを再学習するため）。

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')); 

私はこのエラーに

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

を取得していますので、私の質問は、それは（可能な場合もnewなし）classキーワードを使用せずにそれを行うことが可能ですか？答えが「いいえ」の場合は、Object.createの代わりにclassというキーワードを使用する必要がありますか？

Answer 1

いくつかの単純な状況では、classキーワードなしでカスタム要素を定義することは可能です。

コールの代わりにReflect.construct()を使用します。あなたが述べたように、ES6クラスがちょうどsyntaxic砂糖よりも少しある、ので、それはないサポートされている構文だと

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) 

注意。