Uncaught TypeError: Class constructor LitElement cannot be invoked without 'new'

[rjcorwin]

I'm trying out Lit Element in a vanilla Angular 6 project and running into Uncaught TypeError: Class constructor LitElement cannot be invoked without 'new' when trying out the hello world lit element example. This commit shows how I added webcomponentjs / litelement packages, allow custom schema in angular, declare the my-element LitElement example, and then use that element in the app. That commit was made right after running the ng new command.

If you want to poke at it, run the following commands...

git clone https://github.com/rjsteinert/angular-with-lit-element.git
cd angular-with-list-element
npm install
npm start

[justinfagnani]

@sslotsky do you need to support IE11? If not, change target: 'es5' in the Rollup config.

[huangjihua]

Encountered the same problem and not resolved

[ghost]

I'm using typescript and currently compiling to es6 but I need to support IE11 so eventually must switch to compiling to es5. Is there a solution for this yet?

[justinfagnani]

There has been a solution - compile your app to ES5 and either serve ES5 to IE11 and ES2017+ to Chrome, or serve ES5 to all browsers and include the custom-elements-es5-adapterjs to all ES5 to construct HTML elements: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs

[ghost]

I've done that by importing the following files in my rollup.js input:

import '@webcomponents/webcomponentsjs/webcomponents-loader.js';
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
import 'lit/polyfill-support.js';

However, the Class constructor LitElement cannot be invoked without 'new' error still occurs on both Firefox and Chrome.

[coolcorexix]

is there any update on this? I tried to inject a web component to Youtube but this error was thrown

[justinfagnani]

@coolcorexix what kind of update are you looking for?

You either need to serve native classes to browsers (which you really should be doing - all browsers support classes now) or use the ES5 adapter: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs

[coolcorexix]

@coolcorexix what kind of update are you looking for?

You either need to serve native classes to browsers (which you really should be doing - all browsers support classes now) or use the ES5 adapter: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs

@justinfagnani I think I just did first option without knowing it

I have just solved the problem but I don't know if this can be simpified, the rough idea is like this:

• I saved original CustomElements and HTMLElement in another var at start
• I let the UI that requires es5 polyfill to run
• I then swap the polyfilled vars with the original ones I have from step 1
• Run my web-component logic
• Restore polyfilled context for any further app logic

The app I am talking about here is Youtube and I am injecting some UI by using a chrome extension. The whole process is very hacky so I just don't know if there is any other ways.

[justinfagnani]

The other way is to not compile away classes - use native classes.

[coolcorexix]

The other way is to not compile away classes - use native classes.

@justinfagnani I dont get what you mean, can you give me an example on how to do this?