How to get Polymer 2.0 ES5 elements working with v1 spec?

Question

I've successfully built a number of Polymer 2.0 elements and they run great in ES6 capable browsers.

When I try to transpile them to ES5, the browser throws a bunch of errors, like these:

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

After some research, it looks like you need a native-shim, which comes along with the webcomponentsjs-es5-loader, but after switching to that now I'm getting a new error:

Class constructor DomModule cannot be invoked without 'new'

How do transpiled Polymer 2.0 elements get used in a ES5 browser? Am I missing something?

Dactylology

Did you test this solution: https://mcmap.net/q/833978/-transpiling-class-based-web-components-with-babel, or this one: github.com/webcomponents/… ? – Errand

@Errand the second link worked great! Thanks a lot – Dactylology

It's a possible duplicate of https://mcmap.net/q/1478854/-failed-to-construct-39-htmlelement-39/4600982 – Errand

Answer 1

To use The Custom Element V1 Spec you must use classes. But ES5 browsers don't support classes. So there is an adapter that allows an ES5 browser to act like it is using classes.

See: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs for more information.

You need to include the adapter on your ES5 browser before defining your Custom Element. This goes for Native components as well as Polymer 2+ components.

Cryogen