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

Description

We are upgrading from Lit-Element v1 to Lit v2.0.2 and a lot of downstream teams are consuming our pre-existing web components which were built using v1. Post upgrade a common issue that we are facing against most of components are :

VM388:2 Uncaught TypeError: Failed to construct ‘HTMLElement’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function.

The snippet of the current tsconfig.json setup looks like this

 "composite": true,
 "target": "es2015",
 "module": "es2015",
 "lib": ["es2020", "DOM", "DOM.Iterable"],
 "declaration": true,

I am not sure what is the root-cause of this issue. Does it have something to do with the build target not being set properly. However, I might add, that some teams who use our components in their projects might run Babel to transpile their code and as a result additionally affect our components. Would Babel transpilation issues be one of the causes to this issue ?

I am providing you the area which I suspect is throwing the error. The files were minified and we do not happen to have access to the actual sources or build configurations.

       hasChanged: b
                }, e = function() {
                    var d = HTMLElement.call(this) || this;
                    d._$Et = new Map;
                    d.isUpdatePending = !1;
                    d.hasUpdated = !1;
                    d._$Ei = null;
                    d.o();
                    return d
                };
                $jscomp.inherits(e, HTMLElement);

and I suspect this transpiled code is from this source

  class o extends HTMLElement {
        constructor() {
            super(),
            this._$Et = new Map,
            this.isUpdatePending = !1,
            this.hasUpdated = !1,
            this._$Ei = null,
            this.o()
        }

Can any one help what might be causing this issue ?

[justinfagnani]

Custom elements need to be actual classes with a real super() call, but this hasn’t changed in Lit 2 so a Lit 2 upgrade shouldn’t change anything here.

If teams are compiling to ES5 (they should stop that!) then they’ll need the custom-elements-es5-adapter: https://www.npmjs.com/package/@webcomponents/webcomponentsjs#user-content-custom-elements-es5-adapterjs

This is a shim that takes as ES5 “class” as output by Babel and wraps it in a real JS class for the browser. You must only load it on browsers with native custom elements, and be sure to not compile it.

[maharshidutta]

We had earlier used a shim to support ES5 for Lit. (Lit-Element to be specific). Somehow we had missed out adding that adaptor. But now after adding the shim. It is working at our end. Thanks for the response. Closing this issue.