0

I'm having problem using JS custom elements (web components) together with stenciljs components with support in IE11 and modern browsers.

I've downloaded stencil starter project https://github.com/ionic-team/stencil-component-starter and tried the following code:

...
<script src="/build/app.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/custom-elements-es5-adapter.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-lite.js"></script>
<script>"custom element written in plain js transpiled to ES5"</script>
...
<body>
<my-app></my-app>
<custom-element></custom-element>
</body>

I am getting this error in Chrome:

Uncaught TypeError: Class constructor cannot be invoked without 'new' at new j (custom-elements-es5-adapter.js:4)

Without using polyfills it doesn't work in any browser.

How to use stencil components together with plain JS custom elements (web components)?

majo
  • 1
  • 2
  • You must publish the js code: app.js – Marc Mar 05 '18 at 10:19
  • @Marc file [build/app.js](https://pastebin.com/mRVvHYNV) – majo Mar 05 '18 at 11:00
  • I think that `custom-elements-es5-adapter.js` needs to be loaded after `webcomponents-lite.js` and only on browsers that support Class. The other way to handle this is to only transpile for IE11 and use the native ES6 files for all other browsers. Then you shouldn't need `custom-elements-es5-adapter.js` – Intervalia Mar 05 '18 at 19:23

0 Answers0