2

Stackblitz compiles the code to es5 (or es3).

The problem is that web components need the class notation in order to work.

In the example here, I'm trying to use the 3rd party @material web components.

Is there any way to tell stackblitz not to compile certain libraries or give it a target compilation to es6 (preferably es2020)?

Alyona Yavorska
  • 569
  • 2
  • 14
  • 20
yccteam
  • 2,168
  • 4
  • 25
  • 47
  • ES6 and ES2020 are two very different targets. ES6 is equivalent to ES2015, a full five years before ES2020 was published. – Heretic Monkey Aug 23 '20 at 17:18
  • I'm well aware of that. The main point is - I need classes in order for my web components to work with stackblitz. – yccteam Aug 23 '20 at 18:41

1 Answers1

0

Try to custom-elements-es5-adapter to your imports or html (depending on your needs).

Docs for using custom-elements-es5-adapter.js

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

Stackblitz

Further examples:

using script src in html: Stackblitz

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  </head>

using import custom-elements-es5-adapter.js : Stackblitz

// These imports must be first.
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
// All other top-level imports should be specified here so that (a) they follow
// the polyfills and adapter and (b) so that stackblitz will convert their
// module specifiers.
import '@polymer/iron-selector/iron-selector.js';

https://stackblitz.com/edit/js-woikq4?file=index.js

zerocewl
  • 11,401
  • 6
  • 27
  • 53