V1, Internet Explorer, prototype and Reflect.construct()

[noopole]

I'm trying to make my custom elements v1 work with Internet Explorer 11.
Because I cannot use "class" in IE, I use the "prototype" way to define a Custom Element.

function CE () {
    return Reflect.construct( HTMLElement, [], CE )
}
CE.prototype = Object.create( HTMLElement.prototype )
CE.prototype.connectedCallback = function () { console.log( 'connected!' ) }
customElements.define( 'c-e', CE )

That works fine with Chrome with no polyfill, and with Internet Explorer 11 with this polyfill. When I use the polyfill and Chrome in the same time I get the following exception:

TypeError: Cannot read property 'create' of undefined
at new CustomElementsV1 (document-register-element.max.js:1357)
at CE (ce.html:21)
at CustomElementRegistry.define (document-register-element.max.js:1226)
at ce.html:52

I can catch the error and return nothing, then it's fine too but I'll get another exception ("super() should be called in the constructor()").

Is there a way to avoid the (first) error in Chrome?

[WebReflection]

Have you tried passing arguments instead?

function CE () {
    return Reflect.construct(HTMLElement, arguments, CE);
}
Object.setPrototypeOf(CE, HTMLElement);
Object.setPrototypeOf(CE.prototype, HTMLElement.prototype);
customElements.define('c-e', CE);

[WebReflection]

I've edited, please try passing arguments since those are mandatory to make it work.

[WebReflection]

I've just tested both IE11 and Chrome after this polyfill, all good.

The caveat was also already specified in the README.
https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context

Closing

[noopole]

Thank you very much! 🥇
I would never have found that by myself. I suspected it was related to the quoted caveat but I couldn't figure how apply it in the prototypal notation.

It seems that the only second instruction solved the issue:
Object.setPrototypeOf(CE.prototype, HTMLElement.prototype);

[WebReflection]

It seems that the only second instruction solved the issue:

Cool but it doesn't matter: you should still pass received arguments to the Reflect call or you might have other runtime surprises.

[WebReflection]

btw using this class and this helper you can simplify your life

// most basic use case
var CE = CustomTag({name: 'c-e'});

[noopole]

I've tried and created the same type of wrapper for my custom element declaration. I'll give a try to yours which should be more robust.
Thanks for the medium article: it learnt me that classes are not only syntaxic sugar! which I was still believing... (although custom element v1 advent gave me some doubts)