'native-shim.js' ES6? about custom-elements

[p-bakker]

Maybe a solution would be to (re)write the native-shim.js in syntactically valid ES5, so no:

• arrow functions
• let/const
• class

I've done this locally, only 'problem' was the StandInElement, which realy needs to be an ES6 class that extends NativeHTMLElement and has a constructor that calls super. I've solved that one using an eval:
var StandInElement = eval('var x = class extends NativeHTMLElement {constructor() {super();Object.setPrototypeOf(this, elementProto);if (!userConstruction) { browserConstruction = true;elementClass.call(this);} userConstruction = false;}};x')

This way the native shim can be loaded as is without errors on non-es6 browsers and still does it's thing properly on ES6 browsers with Custom Element support.

Only downside of this approach is that is uses eval which I guess means browsers cannot properly do their JS optimizations, so it might have a bit of a performance penalty

Thoughts? I could create aPR with my ES5-ified version

[nielsheeren]

I've created this ugly work-around for IE11 but it works like a charm.

The string is the base64 encoded, minified version of native-shim.js and you can do it yourself it if you don't want to copy/paste such dodgy code.

if (window.customElements) eval(atob('KCgpPT57J3VzZSBzdHJpY3QnO2lmKHdpbmRvdy5jdXN0b21FbGVtZW50cyl7Y29uc3QgYT13aW5kb3cuSFRNTEVsZW1lbnQsYj13aW5kb3cuY3VzdG9tRWxlbWVudHMuZGVmaW5lLGM9d2luZG93LmN1c3RvbUVsZW1lbnRzLmdldCxkPW5ldyBNYXAsZT1uZXcgTWFwO2xldCBmPSExLGc9ITE7d2luZG93LkhUTUxFbGVtZW50PWZ1bmN0aW9uKCl7aWYoIWYpe2NvbnN0IGo9ZC5nZXQodGhpcy5jb25zdHJ1Y3Rvciksaz1jLmNhbGwod2luZG93LmN1c3RvbUVsZW1lbnRzLGopO2c9ITA7Y29uc3QgbD1uZXcgaztyZXR1cm4gbH1mPSExfSx3aW5kb3cuSFRNTEVsZW1lbnQucHJvdG90eXBlPWEucHJvdG90eXBlO09iamVjdC5kZWZpbmVQcm9wZXJ0eSh3aW5kb3csJ2N1c3RvbUVsZW1lbnRzJyx7dmFsdWU6d2luZG93LmN1c3RvbUVsZW1lbnRzLGNvbmZpZ3VyYWJsZTohMCx3cml0YWJsZTohMH0pLE9iamVjdC5kZWZpbmVQcm9wZXJ0eSh3aW5kb3cuY3VzdG9tRWxlbWVudHMsJ2RlZmluZScse3ZhbHVlOihqLGspPT57Y29uc3QgbD1rLnByb3RvdHlwZSxtPWNsYXNzIGV4dGVuZHMgYXtjb25zdHJ1Y3Rvcigpe3N1cGVyKCksT2JqZWN0LnNldFByb3RvdHlwZU9mKHRoaXMsbCksZ3x8KGY9ITAsay5jYWxsKHRoaXMpKSxnPSExfX0sbj1tLnByb3RvdHlwZTttLm9ic2VydmVkQXR0cmlidXRlcz1rLm9ic2VydmVkQXR0cmlidXRlcyxuLmNvbm5lY3RlZENhbGxiYWNrPWwuY29ubmVjdGVkQ2FsbGJhY2ssbi5kaXNjb25uZWN0ZWRDYWxsYmFjaz1sLmRpc2Nvbm5lY3RlZENhbGxiYWNrLG4uYXR0cmlidXRlQ2hhbmdlZENhbGxiYWNrPWwuYXR0cmlidXRlQ2hhbmdlZENhbGxiYWNrLG4uYWRvcHRlZENhbGxiYWNrPWwuYWRvcHRlZENhbGxiYWNrLGQuc2V0KGssaiksZS5zZXQoaixrKSxiLmNhbGwod2luZG93LmN1c3RvbUVsZW1lbnRzLGosbSl9LGNvbmZpZ3VyYWJsZTohMCx3cml0YWJsZTohMH0pLE9iamVjdC5kZWZpbmVQcm9wZXJ0eSh3aW5kb3cuY3VzdG9tRWxlbWVudHMsJ2dldCcse3ZhbHVlOmo9PmUuZ2V0KGopLGNvbmZpZ3VyYWJsZTohMCx3cml0YWJsZTohMH0pfX0pKCk7'));

[treshugart]

If you npm install it, the main field points to the transpiled ES5 source. In other words, you shouldn't be consuming src/ directly. If you don't want to use NPM, you can also get it at https://unpkg.com/@webcomponents/custom-elements.

[MrMcGibblets]

Sorry, I may be missing something but this shim is not included in the NPM of custom-elements. My question here is that I want to use the 'native-shim.js' to allow my ES5 classes to work with custom-elements v1 in browsers that do not support ES6. Converting this to ES5 results in the same error that this is trying to fix.

[treshugart]

You're not supposed to transpile the native-shim; it needs to be in es2015 in order to work properly. The intent is for you to only include it in supported browsers and if you're transpiling your definitions to ES5.

[treshugart]

Related to #25.

[MrMcGibblets]

Thanks, the intention of this shim is different to what i thought. V0 custom elements is the way forward for me for the time being.

[tconroy]

@treshugart I'm also confused by this. So lets say I have a webpack config where I am bundling the CustomElements and native-shim..

  entry: [
    '@webcomponents/custom-elements/src/native-shim',
    '@webcomponents/custom-elements',
    'ModuleThatUsesCustomElements',
    './src/MyAppEntrypoint',
  ],

this works great in modern ES6-ready browsers, but makes it impossible to use custom elements on older devices ( ie iOS 8).

If I just conditionally import the shim in my app code, then anything injected higher in the load order (ie ModuleThatUsesCustomElements above) will blow up because we're not properly shimmed at the point it executes / registers the custom elements.

Can we transpile native-shim to es5? How would I get this working with older browsers that don't support ES2015 or CustomElements natively?

[MrMcGibblets]

Hi @tconroy

I feel your problems, we spent a long time creating our Plugin framework using web components, we wanted to use all the new features in the v1 spec, however as an enterprise application we do support browsers that don't support ES6 :( When submitting this issue i thought the native-shim's purpose was to help me in the situation, however that isn't the case the shim works differently than you naturally feel, i transpired it and made changes however it is not the solution and will not solve the problems you want to overcome.

In the end after a lot of hard work we had to go back to the v0 spec. I do get that this is very much a technology at the bleeding edge and for progress to be made you cant always support older tech, it is a shame and makes it difficult to use in the enterprise world, but i will keep trying!

[tconroy]

Hey @MrMcGibblets,
thanks for sharing. I'm in a similar scenario -- enterprise environment where we still have a high % of ES5-only devices so transpiling is a must-have.

I'm curious how others are approaching this problem. Surely not everyone is just sticking with v0 to maintain ES5 compatibility.. Is there really no way to get v1 working with ES5 browsers? That seems quite crazy to me. Would any of the maintainers like to chime in with how they've observed this issue being solved in the wild?

Any input much appreciated.

[MrMcGibblets]

Just to leave a link here for anyone in the future.

http://www.milezero.org/index.php/tech/web/classless_components.html i found this really useful when looking at this issue.

FYI due to this we ended up creating native mobile apps for now, I still love WebComponents but it just wasn't to be for this project.

[007lva]

@p-bakker I'm not a contributor yet, but I'll be really glad to see your PR. I was looking for hours how to get the native shim to work on IE11 without success.

[jimmymain]

from my point of view this is a problem still: https://stackoverflow.com/questions/50617479/angular-6-custom-elements-fail-on-ie11-and-firefox-with-syntax-and-shadow-dom-er