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)?
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';
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';