fix: fix compat mode

Author: nolanlawson

packages/@lwc/engine-dom/src/apis/create-element.ts

@@ -20,7 +20,7 @@ import {
     disconnectRootElement,
     LightningElement,
 } from '@lwc/engine-core';
-import { getUpgradableElement } from '../renderer';
+import { getUpgradableElement, getUserConstructor } from '../renderer';
 
 // TODO [#2472]: Remove this workaround when appropriate.
 // eslint-disable-next-line lwc-internal/no-global-node
@@ -115,21 +115,18 @@ export function createElement(
      * mechanism that only passes that argument if the constructor is known to be
      * an upgradable custom element.
      */
-    class UserElement extends HTMLElement {
-        constructor() {
-            super();
-            const elm = this;
-            createVM(elm, Ctor, {
-                tagName,
-                mode: options.mode !== 'closed' ? 'open' : 'closed',
-                owner: null,
-            });
-            ConnectingSlot.set(elm, connectRootElement);
-            DisconnectingSlot.set(elm, disconnectRootElement);
-            wasComponentUpgraded = true;
-        }
-    }
-    const element = new UpgradableConstructor(UserElement.prototype.constructor);
+    const upgradeCallback = (elm: HTMLElement) => {
+        createVM(elm, Ctor, {
+            tagName,
+            mode: options.mode !== 'closed' ? 'open' : 'closed',
+            owner: null,
+        });
+        ConnectingSlot.set(elm, connectRootElement);
+        DisconnectingSlot.set(elm, disconnectRootElement);
+        wasComponentUpgraded = true;
+    };
+    const UserConstructor = getUserConstructor(upgradeCallback);
+    const element = new UpgradableConstructor(UserConstructor);
     if (!wasComponentUpgraded) {
         /* eslint-disable-next-line no-console */
         console.error(

packages/@lwc/engine-dom/src/renderer.ts

@@ -119,25 +119,28 @@ interface UpgradableCustomElementConstructor extends CustomElementConstructor {
     new (upgradeCallback?: UpgradeCallback): HTMLElement;
 }
 export let getUpgradableElement: (name: string) => CustomElementConstructor;
+export let getUserConstructor: (
+    upgradeCallback: UpgradeCallback
+) => UpgradableCustomElementConstructor | UpgradeCallback;
 if (isCustomElementRegistryAvailable()) {
     const getPivotCustomElement = patchCustomElementRegistry();
     const cachedConstructor: Record<string, CustomElementConstructor> = create(null);
     getUpgradableElement = (name: string) => {
         let Ctor = cachedConstructor[name];
         if (!Ctor) {
-            class LWCUpgradableElement extends HTMLElement {
-                constructor(upgradeCallback?: UpgradeCallback) {
-                    super();
-                    if (isFunction(upgradeCallback)) {
-                        upgradeCallback(this); // nothing to do with the result for now
-                    }
-                }
-            }
-
+            class LWCUpgradableElement extends HTMLElement {}
             Ctor = getPivotCustomElement(name, LWCUpgradableElement);
         }
         return Ctor;
     };
+    getUserConstructor = (upgradeCallback: UpgradeCallback) => {
+        return class UserElement extends HTMLElement {
+            constructor() {
+                super();
+                upgradeCallback(this);
+            }
+        };
+    };
 } else {
     // no registry available here
     getUpgradableElement = (name: string): UpgradableCustomElementConstructor => {
@@ -149,17 +152,9 @@ if (isCustomElementRegistryAvailable()) {
             return elm;
         } as unknown as UpgradableCustomElementConstructor;
     };
+    getUserConstructor = (upgradeCallback: UpgradeCallback) => upgradeCallback;
 }
 
-export const getUserConstructor = (upgradeCallback: UpgradeCallback) => {
-    return class UserElement extends HTMLElement {
-        constructor() {
-            super();
-            upgradeCallback(this);
-        }
-    };
-};
-
 let hydrating = false;
 
 export function setIsHydrating(value: boolean) {