如何让 Web Components 使用 TypeScript 为 IE11/Edge/Chrome/Firefox 进行编译？

Question

设置了一个 Web 项目以使用 TypeScript/WebPack 后，我无法让 Google Chrome 运行结果：

错误如下： "Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function."

我了解到转译到 ES5需要一个 shim，但我仍然无法让它工作。这可能是因为我不想在 HTML 中添加 <script> 元素，而是想import "../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle";在我的.ts文件中添加。

如何在不向 HTML 文件中添加 <script> 元素的情况下使其工作？

我从本教程中获取了我的tsconfig.json和webpack.config.js文件。

Answer 1

这是解决方案：

npm install @webcomponents/webcomponentsjs --save-dev

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

...

据我所知，这在 Chrome、Firefox、Edge 和 IE11 上运行流畅。