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/@webponents/webponentsjs/webponents-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.

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/@webponents/webponentsjs/webponents-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.

• javascript
• typescript
• google-chrome
• web-ponent
• webpack-4

• 1 Hopefully this helps – github./angular/angular/issues/24556 – Callam Commented Feb 4, 2019 at 0:38
• It looks like this is making things work for Chrome, but IE11 fails with customElements is undefined. – AxD Commented Feb 4, 2019 at 17:30
• 1 Found it, thanks to your hint. I'll add the solution here. – AxD Commented Feb 4, 2019 at 17:41

1 Answer 1

Here's the solution:

npm install @webponents/webponentsjs --save-dev

import "@webponents/webponentsjs/webponents-bundle";
import '@webponents/webponentsjs/custom-elements-es5-adapter.js';

...

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