How can I get Web Components to compile with TypeScript for IE11/Edge/Chrome/Firefox?

Question

Having set up a web project to use TypeScript/WebPack I cannot get Google Chrome to run the result:

The error reads: "Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function."

I learned that a shim is required for transpiling to ES5, but I still can't get this to work. That's probably because I don't want to add a <script> element to the HTML but instead I want to import "../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle"; in my .ts files.

How can I get this to work without adding <script> elements to my HTML files?

I took my tsconfig.json and webpack.config.js files from this tutorial.

Answer 1

Here's the solution:

npm install @webcomponents/webcomponentsjs --save-dev

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

...

As far as I can see, this runs smoothly on Chrome, Firefox, Edge and IE11.