[Native CEv1][babel] customElements.define fails on ES5 class from Babel

[t2ym]

Native customElements.define fails on ES5 class from Babel.

Transpiled ES5 DomModule cannot extend native HTMLElement class.

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

customElements	Polymer	define
native	ES6	success
native	ES5	failure
polyfill	ES6	success
polyfill	ES5	success

[t2ym]

apply(this,arguments) does not work for native ES6 class constructor.

Is there any workaround for Babel to use the new operator, which is available in ES5 as well, in transpilation?

var DomModule = function(_HTMLElement) {
  _inherits(DomModule,_HTMLElement);
  function DomModule() {
    _classCallCheck(this,DomModule);
    return _possibleConstructorReturn(this,
    (DomModule.__proto__||Object.getPrototypeOf(DomModule))
      .apply(this,arguments));
  }

[t2ym]

It seems the issue is at the ES6 class implementation on Chrome Canary 55 and Beta 54. It is not reproducible on Chrome 53. On Chrome 53, Babel class code can properly inherit HTMLElement native class.

[t2ym]

Since HTMLElement class is replaced with a ES5 function by Custom Elements V1 polyfill, HTMLElement class is compatible with Babel-transpiled classes written in ES5.

HTMLElement.toString()
"function (){var a=g();if(a.f){var b=a.f;a.f=null;return b}if(this.constructor)return a=a.j.get(this.constructor),l(f,a,void 0,!1);throw Error("Unknown constructor. Did you call customElements.define()?");}"

Even on Chrome 53, before Custom Element V1 polyfilling, the same exception is thrown by calling native HTMLElement constructor by apply()

HTMLElement() { [native code] }
HTMLElement.apply({}, [])
VM68673:1 Uncaught TypeError: Failed to construct 'HTMLElement': 
Please use the 'new' operator, this DOM object constructor cannot be called as a function.(…)

The native HTMLElement class cannot be extended by Babel polyfilled ES5 classes.

customElements	HTMLElement	Custom Element class	Instantiation
native	native	ES6	success
native	native	ES5	failure
polyfill	patched	ES6	success
polyfill	patched	ES5	success

[t2ym]

Can a pass-through do-nothing wrapper of the native HTMLElement class in ES5 be created for Babel compatibility with the native Custom Elements V1?

[t2ym]

Disabling native Custom Elements V1 by window.customElements.forcePolyfill = true is not the right solution.

[t2ym]

custom-elements/src/native-shim.js imposes slight overheads and thus should be applied only for the browsers with native Custom Elements V1.