I converting a Polymer app to Polymer 2. I'm changing my components to the ES6 Class syntax (yes I know I could leave them in v1.7 hybrid style but I would like them to be ES6 Classes).
However when I transpile the code back to ES5 (with BabelJS) I run into a known issue regarding ES5 'classes' extending native elements (https://github.com/babel/babel/issues/4480).
I tried babel-plugin-transform-custom-element-classes but that didn't work. So I tried the webcomponents shim meant to fix this issue: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs
But the shim doesn't work! I don't know what I'm doing wrong :(
<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
...
<y-example></y-example>
...
<script>
/* transpiled to ES5 */
class YExample extends HTMLElement {}
customElements.define('y-example', YExample);
</script>
Here is my jsbin: http://jsbin.com/feqoniz/edit?html,js,output
Notice I'm including the custom-elements-es5-adapter.js, also notice the JS panel is using ES6/Babel.
If you remove the custom-elements-es5-adapter.js and change the JS panel to normal Javascript (not ES6/Babel) then everything works fine.
You can include or remove the adapter (leaving ES6/Babel) and the error is basically the same thing, except that when the adapter is included it comes from the adapter code instead: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
I must be doing something silly? Any ideas?
Well, I was doing something silly.. I should have tried upgrading my Babel package.
Upgraded BabelJS from 6.23.1 to latest 6.24.1 and it fixed the problem. :P