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 .
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.