IE11 および最新のブラウザーでサポートされている stenciljs コンポーネントと一緒に JS カスタム要素 (Web コンポーネント) を使用すると問題が発生します。
ステンシル スターター プロジェクトhttps://github.com/ionic-team/stencil-component-starterをダウンロードし、次のコードを試しました。
...
<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>
Chrome で次のエラーが発生します。
キャッチされていない TypeError: クラス コンストラクターは、新しい j (custom-elements-es5-adapter.js:4) で 'new' なしで呼び出すことはできません
ポリフィルを使用しないと、どのブラウザーでも機能しません。
ステンシル コンポーネントをプレーンな JS カスタム要素 (Web コンポーネント) と一緒に使用するには?