IE11 Element has no innerHTML descriptor but HTMLElement does

[kapouer]

With various other es5 polyfills, it's possible to run custom elements on IE11.
However,

> Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML')
undefined
> Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'innerHTML')
[Object]

I'm not sure it's fixable in a general way (in another polyfill),
it's easier to workaround it here.

[WebReflection]

https://github.com/ungap/custom-elements-builtin#all-possible-features-detections

[WebReflection]

To clarify: this polyfill is for Safari and WebKit browsers only, you can use document-register-element for IE11, but also IE10, or IE9, or even IE8 👋

[kapouer]

I assumed it was all right to include it in a bundle even if not needed, but i was wrong.

[WebReflection]

@kapouer you are not wrong, but you have to include document-register-element before this one, or old Edge/IE won't work at all.

In few words, this polyfill is only for browsers that have customElements already.

Browsers without this polyfill need the old one, and there are ways to not initialize the old one, and yet it should be included if you target IE/Edge.

[kapouer]

Well, i am including document-register-element before this one.
So maybe my initial report still ask for a fix.

[WebReflection]

The issue is that IE should never land in the catch statement, if the other polyfill was in already.

It throws because it has no Reflect, so maybe I can bail-out right away if that's the case (no Reflect)

[WebReflection]

Actually:

if (customElements.get('ungap-li') || typeof Reflect == typeof EXTENDS)
    return;

IE does never enter in there, if your transpiler breaks the code, I'd ratther file an issue to your transpiler of choice.

If you change the source to this code:

if (customElements.get('ungap-li') || typeof Reflect == 'undefined')
    return;

what happens?

It's also possible you are using obtrusive polyfills that are incapable of providing real Reflect API for IE11, so that Reflect is there, but then it fails here:

var HtmlLI = HTMLLIElement;
    var LI = function () {
      return Reflect.construct(HtmlLI, [], LI);
    };
    LI.prototype = Object.create(HtmlLI.prototype);
    customElements.define('ungap-li', LI, desc);
    if (!/is="ungap-li"/.test((new LI).outerHTML))
      throw desc;

But then again, IE should never enter any of this, if document-register-element is provided upfront, and no Reflect is there ...

TL;DR I think you have a polyfill order issue ... never load my polyfills after others, as mine are tested against non polluted environments, others pretend to patch the un-patchable, and easily break after.

[WebReflection]

P.S. if you have document-register-element in, it does polyfill custom elements with built-in extends already for everyone, so you might as well ditch this polyfill and just use dre.

[kapouer]

Actually some transpiler was breaking the code: swc-project/swc#688 ! But i only used it locally for testing, this issue is not about that ;)

And yes, i am loading polyfill.io before, so it pulls a Reflect polyfill.

[WebReflection]

If you can use polyfill.io then you can use one of these best practices to include this polyfill too:
https://github.com/ungap/custom-elements-builtin#all-possible-features-detections

[WebReflection]

So, I've discovered a new trick, that should now work out of the box, even if polyfills io is on top of the page.

Please let me know how that goes, thanks.