@lwc/engine-core 2.25.0 → 2.26.0

package/dist/engine-core.cjs.js

@@ -1465,7 +1465,9 @@ const refsCache = new WeakMap();
 const LightningElement = function () {
     // This should be as performant as possible, while any initialization should be done lazily
     if (shared.isNull(vmBeingConstructed)) {
-        throw new ReferenceError('Illegal constructor');
+        // Thrown when doing something like `new LightningElement()` or
+        // `class Foo extends LightningElement {}; new Foo()`
+        throw new TypeError('Illegal constructor');
     }
     const vm = vmBeingConstructed;
     const { def, elm } = vm;
@@ -2529,274 +2531,213 @@ const swappedStyleMap = new WeakMap();
 const activeTemplates = new WeakMap();
 const activeComponents = new WeakMap();
 const activeStyles = new WeakMap();
-
 function rehydrateHotTemplate(tpl) {
-  const list = activeTemplates.get(tpl);
-
-  if (!shared.isUndefined(list)) {
-    list.forEach(vm => {
-      if (shared.isFalse(vm.isDirty)) {
-        // forcing the vm to rehydrate in the micro-task:
-        markComponentAsDirty(vm);
-        scheduleRehydration(vm);
-      }
-    }); // resetting the Set to release the memory of those vm references
-    // since they are not longer related to this template, instead
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return true;
+    const list = activeTemplates.get(tpl);
+    if (!shared.isUndefined(list)) {
+        list.forEach((vm) => {
+            if (shared.isFalse(vm.isDirty)) {
+                // forcing the vm to rehydrate in the micro-task:
+                markComponentAsDirty(vm);
+                scheduleRehydration(vm);
+            }
+        });
+        // resetting the Set to release the memory of those vm references
+        // since they are not longer related to this template, instead
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return true;
 }
-
 function rehydrateHotStyle(style) {
-  const list = activeStyles.get(style);
-
-  if (!shared.isUndefined(list)) {
-    list.forEach(vm => {
-      // if a style definition is swapped, we must reset
-      // vm's template content in the next micro-task:
-      forceRehydration(vm);
-    }); // resetting the Set to release the memory of those vm references
-    // since they are not longer related to this style, instead
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return true;
+    const list = activeStyles.get(style);
+    if (!shared.isUndefined(list)) {
+        list.forEach((vm) => {
+            // if a style definition is swapped, we must reset
+            // vm's template content in the next micro-task:
+            forceRehydration(vm);
+        });
+        // resetting the Set to release the memory of those vm references
+        // since they are not longer related to this style, instead
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return true;
 }
-
 function rehydrateHotComponent(Ctor) {
-  const list = activeComponents.get(Ctor);
-  let canRefreshAllInstances = true;
-
-  if (!shared.isUndefined(list)) {
-    list.forEach(vm => {
-      const {
-        owner
-      } = vm;
-
-      if (!shared.isNull(owner)) {
-        // if a component class definition is swapped, we must reset
-        // owner's template content in the next micro-task:
-        forceRehydration(owner);
-      } else {
-        // the hot swapping for components only work for instances of components
-        // created from a template, root elements can't be swapped because we
-        // don't have a way to force the creation of the element with the same state
-        // of the current element.
-        // Instead, we can report the problem to the caller so it can take action,
-        // for example: reload the entire page.
-        canRefreshAllInstances = false;
-      }
-    }); // resetting the Set to release the memory of those vm references
-    // since they are not longer related to this constructor, instead
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return canRefreshAllInstances;
+    const list = activeComponents.get(Ctor);
+    let canRefreshAllInstances = true;
+    if (!shared.isUndefined(list)) {
+        list.forEach((vm) => {
+            const { owner } = vm;
+            if (!shared.isNull(owner)) {
+                // if a component class definition is swapped, we must reset
+                // owner's template content in the next micro-task:
+                forceRehydration(owner);
+            }
+            else {
+                // the hot swapping for components only work for instances of components
+                // created from a template, root elements can't be swapped because we
+                // don't have a way to force the creation of the element with the same state
+                // of the current element.
+                // Instead, we can report the problem to the caller so it can take action,
+                // for example: reload the entire page.
+                canRefreshAllInstances = false;
+            }
+        });
+        // resetting the Set to release the memory of those vm references
+        // since they are not longer related to this constructor, instead
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return canRefreshAllInstances;
 }
-
 function getTemplateOrSwappedTemplate(tpl) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
-      visited.add(tpl);
-      tpl = swappedTemplateMap.get(tpl);
+        visited.add(tpl);
+        tpl = swappedTemplateMap.get(tpl);
     }
-  }
-
-  return tpl;
+    return tpl;
 }
 function getComponentOrSwappedComponent(Ctor) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
-      visited.add(Ctor);
-      Ctor = swappedComponentMap.get(Ctor);
+        visited.add(Ctor);
+        Ctor = swappedComponentMap.get(Ctor);
     }
-  }
-
-  return Ctor;
+    return Ctor;
 }
 function getStyleOrSwappedStyle(style) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedStyleMap.has(style) && !visited.has(style)) {
-      visited.add(style);
-      style = swappedStyleMap.get(style);
+        visited.add(style);
+        style = swappedStyleMap.get(style);
     }
-  }
-
-  return style;
+    return style;
 }
 function setActiveVM(vm) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     // tracking active component
     const Ctor = vm.def.ctor;
     let componentVMs = activeComponents.get(Ctor);
-
     if (shared.isUndefined(componentVMs)) {
-      componentVMs = new Set();
-      activeComponents.set(Ctor, componentVMs);
-    } // this will allow us to keep track of the hot components
-
-
-    componentVMs.add(vm); // tracking active template
-
+        componentVMs = new Set();
+        activeComponents.set(Ctor, componentVMs);
+    }
+    // this will allow us to keep track of the hot components
+    componentVMs.add(vm);
+    // tracking active template
     const tpl = vm.cmpTemplate;
-
     if (tpl) {
-      let templateVMs = activeTemplates.get(tpl);
-
-      if (shared.isUndefined(templateVMs)) {
-        templateVMs = new Set();
-        activeTemplates.set(tpl, templateVMs);
-      } // this will allow us to keep track of the templates that are
-      // being used by a hot component
-
-
-      templateVMs.add(vm); // tracking active styles associated to template
-
-      const stylesheets = tpl.stylesheets;
-
-      if (!shared.isUndefined(stylesheets)) {
-        flattenStylesheets(stylesheets).forEach(stylesheet => {
-          // this is necessary because we don't hold the list of styles
-          // in the vm, we only hold the selected (already swapped template)
-          // but the styles attached to the template might not be the actual
-          // active ones, but the swapped versions of those.
-          stylesheet = getStyleOrSwappedStyle(stylesheet);
-          let stylesheetVMs = activeStyles.get(stylesheet);
-
-          if (shared.isUndefined(stylesheetVMs)) {
-            stylesheetVMs = new Set();
-            activeStyles.set(stylesheet, stylesheetVMs);
-          } // this will allow us to keep track of the stylesheet that are
-          // being used by a hot component
-
-
-          stylesheetVMs.add(vm);
-        });
-      }
+        let templateVMs = activeTemplates.get(tpl);
+        if (shared.isUndefined(templateVMs)) {
+            templateVMs = new Set();
+            activeTemplates.set(tpl, templateVMs);
+        }
+        // this will allow us to keep track of the templates that are
+        // being used by a hot component
+        templateVMs.add(vm);
+        // tracking active styles associated to template
+        const stylesheets = tpl.stylesheets;
+        if (!shared.isUndefined(stylesheets)) {
+            flattenStylesheets(stylesheets).forEach((stylesheet) => {
+                // this is necessary because we don't hold the list of styles
+                // in the vm, we only hold the selected (already swapped template)
+                // but the styles attached to the template might not be the actual
+                // active ones, but the swapped versions of those.
+                stylesheet = getStyleOrSwappedStyle(stylesheet);
+                let stylesheetVMs = activeStyles.get(stylesheet);
+                if (shared.isUndefined(stylesheetVMs)) {
+                    stylesheetVMs = new Set();
+                    activeStyles.set(stylesheet, stylesheetVMs);
+                }
+                // this will allow us to keep track of the stylesheet that are
+                // being used by a hot component
+                stylesheetVMs.add(vm);
+            });
+        }
     }
-  }
 }
 function removeActiveVM(vm) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     // tracking inactive component
     const Ctor = vm.def.ctor;
     let list = activeComponents.get(Ctor);
-
     if (!shared.isUndefined(list)) {
-      // deleting the vm from the set to avoid leaking memory
-      list.delete(vm);
-    } // removing inactive template
-
-
-    const tpl = vm.cmpTemplate;
-
-    if (tpl) {
-      list = activeTemplates.get(tpl);
-
-      if (!shared.isUndefined(list)) {
         // deleting the vm from the set to avoid leaking memory
         list.delete(vm);
-      } // removing active styles associated to template
-
-
-      const styles = tpl.stylesheets;
-
-      if (!shared.isUndefined(styles)) {
-        flattenStylesheets(styles).forEach(style => {
-          list = activeStyles.get(style);
-
-          if (!shared.isUndefined(list)) {
+    }
+    // removing inactive template
+    const tpl = vm.cmpTemplate;
+    if (tpl) {
+        list = activeTemplates.get(tpl);
+        if (!shared.isUndefined(list)) {
             // deleting the vm from the set to avoid leaking memory
             list.delete(vm);
-          }
-        });
-      }
+        }
+        // removing active styles associated to template
+        const styles = tpl.stylesheets;
+        if (!shared.isUndefined(styles)) {
+            flattenStylesheets(styles).forEach((style) => {
+                list = activeStyles.get(style);
+                if (!shared.isUndefined(list)) {
+                    // deleting the vm from the set to avoid leaking memory
+                    list.delete(vm);
+                }
+            });
+        }
     }
-  }
 }
 function swapTemplate(oldTpl, newTpl) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (isTemplateRegistered(oldTpl) && isTemplateRegistered(newTpl)) {
-      swappedTemplateMap.set(oldTpl, newTpl);
-      return rehydrateHotTemplate(oldTpl);
-    } else {
-      throw new TypeError(`Invalid Template`);
+    if (process.env.NODE_ENV !== 'production') {
+        if (isTemplateRegistered(oldTpl) && isTemplateRegistered(newTpl)) {
+            swappedTemplateMap.set(oldTpl, newTpl);
+            return rehydrateHotTemplate(oldTpl);
+        }
+        else {
+            throw new TypeError(`Invalid Template`);
+        }
     }
-  }
-
-  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    return false;
 }
 function swapComponent(oldComponent, newComponent) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (isComponentConstructor(oldComponent) && isComponentConstructor(newComponent)) {
-      swappedComponentMap.set(oldComponent, newComponent);
-      return rehydrateHotComponent(oldComponent);
-    } else {
-      throw new TypeError(`Invalid Component`);
+    if (process.env.NODE_ENV !== 'production') {
+        if (isComponentConstructor(oldComponent) && isComponentConstructor(newComponent)) {
+            swappedComponentMap.set(oldComponent, newComponent);
+            return rehydrateHotComponent(oldComponent);
+        }
+        else {
+            throw new TypeError(`Invalid Component`);
+        }
     }
-  }
-
-  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    return false;
 }
 function swapStyle(oldStyle, newStyle) {
-  if (process.env.NODE_ENV !== 'production') {
-    // TODO [#1887]: once the support for registering styles is implemented
-    // we can add the validation of both styles around this block.
-    swappedStyleMap.set(oldStyle, newStyle);
-    return rehydrateHotStyle(oldStyle);
-  }
-
-  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    if (process.env.NODE_ENV !== 'production') {
+        // TODO [#1887]: once the support for registering styles is implemented
+        // we can add the validation of both styles around this block.
+        swappedStyleMap.set(oldStyle, newStyle);
+        return rehydrateHotStyle(oldStyle);
+    }
+    return false;
 }
 
 /*
@@ -3003,244 +2944,273 @@ function getComponentDef(Ctor) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+
 function makeHostToken(token) {
-    return `${token}-host`;
+  return `${token}-host`;
 }
+
 function createInlineStyleVNode(content) {
-    return api.h('style', {
-        key: 'style',
-        attrs: {
-            type: 'text/css',
-        },
-    }, [api.t(content)]);
+  return api.h('style', {
+    key: 'style',
+    attrs: {
+      type: 'text/css'
+    }
+  }, [api.t(content)]);
 }
+
 function updateStylesheetToken(vm, template) {
-    const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
-    const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
-    const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
-    const { hasScopedStyles } = context;
-    let newToken;
-    let newHasTokenInClass;
-    let newHasTokenInAttribute;
-    // Reset the styling token applied to the host element.
-    const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
-    if (!shared.isUndefined(oldToken)) {
-        if (oldHasTokenInClass) {
-            getClassList(elm).remove(makeHostToken(oldToken));
-        }
-        if (oldHasTokenInAttribute) {
-            removeAttribute(elm, makeHostToken(oldToken));
-        }
-    }
-    // Apply the new template styling token to the host element, if the new template has any
-    // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-    if (!shared.isUndefined(newStylesheets) && newStylesheets.length !== 0) {
-        newToken = newStylesheetToken;
-    }
-    // Set the new styling token on the host element
-    if (!shared.isUndefined(newToken)) {
-        if (hasScopedStyles) {
-            getClassList(elm).add(makeHostToken(newToken));
-            newHasTokenInClass = true;
-        }
-        if (isSyntheticShadow) {
-            setAttribute(elm, makeHostToken(newToken), '');
-            newHasTokenInAttribute = true;
-        }
-    }
-    // Update the styling tokens present on the context object.
-    context.stylesheetToken = newToken;
-    context.hasTokenInClass = newHasTokenInClass;
-    context.hasTokenInAttribute = newHasTokenInAttribute;
+  const {
+    elm,
+    context,
+    renderMode,
+    shadowMode,
+    renderer: {
+      getClassList,
+      removeAttribute,
+      setAttribute
+    }
+  } = vm;
+  const {
+    stylesheets: newStylesheets,
+    stylesheetToken: newStylesheetToken
+  } = template;
+  const isSyntheticShadow = renderMode === 1
+  /* RenderMode.Shadow */
+  && shadowMode === 1
+  /* ShadowMode.Synthetic */
+  ;
+  const {
+    hasScopedStyles
+  } = context;
+  let newToken;
+  let newHasTokenInClass;
+  let newHasTokenInAttribute; // Reset the styling token applied to the host element.
+
+  const {
+    stylesheetToken: oldToken,
+    hasTokenInClass: oldHasTokenInClass,
+    hasTokenInAttribute: oldHasTokenInAttribute
+  } = context;
+
+  if (!shared.isUndefined(oldToken)) {
+    if (oldHasTokenInClass) {
+      getClassList(elm).remove(makeHostToken(oldToken));
+    }
+
+    if (oldHasTokenInAttribute) {
+      removeAttribute(elm, makeHostToken(oldToken));
+    }
+  } // Apply the new template styling token to the host element, if the new template has any
+  // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
+
+
+  if (!shared.isUndefined(newStylesheets) && newStylesheets.length !== 0) {
+    newToken = newStylesheetToken;
+  } // Set the new styling token on the host element
+
+
+  if (!shared.isUndefined(newToken)) {
+    if (hasScopedStyles) {
+      getClassList(elm).add(makeHostToken(newToken));
+      newHasTokenInClass = true;
+    }
+
+    if (isSyntheticShadow) {
+      setAttribute(elm, makeHostToken(newToken), '');
+      newHasTokenInAttribute = true;
+    }
+  } // Update the styling tokens present on the context object.
+
+
+  context.stylesheetToken = newToken;
+  context.hasTokenInClass = newHasTokenInClass;
+  context.hasTokenInAttribute = newHasTokenInAttribute;
 }
+
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
-    const content = [];
-    let root;
-    for (let i = 0; i < stylesheets.length; i++) {
-        let stylesheet = stylesheets[i];
-        if (shared.isArray(stylesheet)) {
-            shared.ArrayPush.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+  const content = [];
+  let root;
+
+  for (let i = 0; i < stylesheets.length; i++) {
+    let stylesheet = stylesheets[i];
+
+    if (shared.isArray(stylesheet)) {
+      shared.ArrayPush.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        // Check for compiler version mismatch in dev mode only
+        checkVersionMismatch(stylesheet, 'stylesheet'); // in dev-mode, we support hot swapping of stylesheet, which means that
+        // the component instance might be attempting to use an old version of
+        // the stylesheet, while internally, we have a replacement for it.
+
+        stylesheet = getStyleOrSwappedStyle(stylesheet);
+      }
+
+      const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS];
+
+      if (features.lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS) {
+        if (!isScopedCss && vm.renderMode === 0
+        /* RenderMode.Light */
+        ) {
+          logError('Unscoped CSS is not supported in Light DOM. Please use scoped CSS (*.scoped.css) instead of unscoped CSS (*.css).');
+          continue;
         }
-        else {
-            if (process.env.NODE_ENV !== 'production') {
-                // Check for compiler version mismatch in dev mode only
-                checkVersionMismatch(stylesheet, 'stylesheet');
-                // in dev-mode, we support hot swapping of stylesheet, which means that
-                // the component instance might be attempting to use an old version of
-                // the stylesheet, while internally, we have a replacement for it.
-                stylesheet = getStyleOrSwappedStyle(stylesheet);
-            }
-            const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS];
-            // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-            const scopeToken = isScopedCss ||
-                (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
-                ? stylesheetToken
-                : undefined;
-            // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
-            // native shadow DOM. Synthetic shadow DOM never uses `:host`.
-            const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
-                ? !isScopedCss
-                : vm.shadowMode === 0 /* ShadowMode.Native */;
-            // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
-            // we use an attribute selector on the host to simulate :dir().
-            let useNativeDirPseudoclass;
-            if (vm.renderMode === 1 /* RenderMode.Shadow */) {
-                useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
-            }
-            else {
-                // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
-                // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
-                if (shared.isUndefined(root)) {
-                    // Only calculate the root once as necessary
-                    root = getNearestShadowComponent(vm);
-                }
-                useNativeDirPseudoclass = shared.isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
-            }
-            shared.ArrayPush.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+      } // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+
+
+      const scopeToken = isScopedCss || vm.shadowMode === 1
+      /* ShadowMode.Synthetic */
+      && vm.renderMode === 1
+      /* RenderMode.Shadow */
+      ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+      // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+
+      const useActualHostSelector = vm.renderMode === 0
+      /* RenderMode.Light */
+      ? !isScopedCss : vm.shadowMode === 0
+      /* ShadowMode.Native */
+      ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+      // we use an attribute selector on the host to simulate :dir().
+
+      let useNativeDirPseudoclass;
+
+      if (vm.renderMode === 1
+      /* RenderMode.Shadow */
+      ) {
+        useNativeDirPseudoclass = vm.shadowMode === 0
+        /* ShadowMode.Native */
+        ;
+      } else {
+        // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
+        // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+        if (shared.isUndefined(root)) {
+          // Only calculate the root once as necessary
+          root = getNearestShadowComponent(vm);
         }
+
+        useNativeDirPseudoclass = shared.isNull(root) || root.shadowMode === 0
+        /* ShadowMode.Native */
+        ;
+      }
+
+      shared.ArrayPush.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
     }
-    return content;
+  }
+
+  return content;
 }
+
 function getStylesheetsContent(vm, template) {
-    const { stylesheets, stylesheetToken } = template;
-    let content = [];
-    if (!shared.isUndefined(stylesheets) && stylesheets.length !== 0) {
-        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-    }
-    return content;
-}
-// It might be worth caching this to avoid doing the lookup repeatedly, but
+  const {
+    stylesheets,
+    stylesheetToken
+  } = template;
+  let content = [];
+
+  if (!shared.isUndefined(stylesheets) && stylesheets.length !== 0) {
+    content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+  }
+
+  return content;
+} // It might be worth caching this to avoid doing the lookup repeatedly, but
 // perf testing has not shown it to be a huge improvement yet:
 // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
+
 function getNearestShadowComponent(vm) {
-    let owner = vm;
-    while (!shared.isNull(owner)) {
-        if (owner.renderMode === 1 /* RenderMode.Shadow */) {
-            return owner;
-        }
-        owner = owner.owner;
+  let owner = vm;
+
+  while (!shared.isNull(owner)) {
+    if (owner.renderMode === 1
+    /* RenderMode.Shadow */
+    ) {
+      return owner;
     }
-    return owner;
+
+    owner = owner.owner;
+  }
+
+  return owner;
 }
 /**
  * If the component that is currently being rendered uses scoped styles,
  * this returns the unique token for that scoped stylesheet. Otherwise
  * it returns null.
  */
+
+
 function getScopeTokenClass(owner) {
-    const { cmpTemplate, context } = owner;
-    return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
+  const {
+    cmpTemplate,
+    context
+  } = owner;
+  return context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
 }
 /**
  * This function returns the host style token for a custom element if it
  * exists. Otherwise it returns null.
+ *
+ * A host style token is applied to the component if scoped styles are used.
  */
+
 function getStylesheetTokenHost(vnode) {
-    const { template: { stylesheetToken }, } = getComponentInternalDef(vnode.ctor);
-    return !shared.isUndefined(stylesheetToken) ? makeHostToken(stylesheetToken) : null;
-}
-function getNearestNativeShadowComponent(vm) {
-    const owner = getNearestShadowComponent(vm);
-    if (!shared.isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        // Synthetic-within-native is impossible. So if the nearest shadow component is
-        // synthetic, we know we won't find a native component if we go any further.
-        return null;
-    }
-    return owner;
-}
-function createStylesheet(vm, stylesheets) {
-    const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
-    if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i]);
-        }
-    }
-    else if (!process.env.IS_BROWSER || vm.hydrated) {
-        // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
-        //       This works in the client, because the stylesheets are created, and cached in the VM
-        //       the first time the VM renders.
-        // native shadow or light DOM, SSR
-        return shared.ArrayMap.call(stylesheets, createInlineStyleVNode);
-    }
-    else {
-        // native shadow or light DOM, DOM renderer
-        const root = getNearestNativeShadowComponent(vm);
-        // null root means a global style
-        const target = shared.isNull(root) ? undefined : root.shadowRoot;
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i], target);
-        }
-    }
-    return null;
+  const {
+    template
+  } = getComponentInternalDef(vnode.ctor);
+  const {
+    stylesheetToken
+  } = template;
+  return !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
 }
 
-/*
- * Copyright (c) 2020, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
-
-function checkHasVM(elm) {
-  const hasVM = !shared.isUndefined(getAssociatedVMIfPresent(elm));
+function getNearestNativeShadowComponent(vm) {
+  const owner = getNearestShadowComponent(vm);
 
-  if (process.env.NODE_ENV !== 'production' && !hasVM) {
-    // Occurs when an element is manually created with the same tag name as an existing LWC component. In that case,
-    // we skip calling the LWC connectedCallback/disconnectedCallback logic and log an error.
-    logError(`VM for tag name "${elm.tagName.toLowerCase()}" is undefined. ` + `This indicates that an element was created with this tag name, ` + `which is already reserved by an LWC component. Use lwc.createElement ` + `instead to create elements.`);
+  if (!shared.isNull(owner) && owner.shadowMode === 1
+  /* ShadowMode.Synthetic */
+  ) {
+    // Synthetic-within-native is impossible. So if the nearest shadow component is
+    // synthetic, we know we won't find a native component if we go any further.
+    return null;
   }
 
-  return hasVM;
+  return owner;
 }
 
-function getUpgradableConstructor(tagName, renderer) {
+function createStylesheet(vm, stylesheets) {
   const {
-    getCustomElement,
-    HTMLElementExported: RendererHTMLElement,
-    defineCustomElement
-  } = renderer; // Should never get a tag with upper case letter at this point, the compiler should
-  // produce only tags with lowercase letters
-  // But, for backwards compatibility, we will lower case the tagName
-
-  tagName = tagName.toLowerCase();
-  let CE = getCustomElement(tagName);
-
-  if (!shared.isUndefined(CE)) {
-    return CE;
-  }
-  /**
-   * LWC Upgradable Element reference to an element that was created
-   * via the scoped registry mechanism, and that is ready to be upgraded.
-   */
-
-
-  CE = class LWCUpgradableElement extends RendererHTMLElement {
-    constructor(upgradeCallback) {
-      super();
-
-      if (shared.isFunction(upgradeCallback)) {
-        upgradeCallback(this); // nothing to do with the result for now
-      }
+    renderMode,
+    shadowMode,
+    renderer: {
+      insertStylesheet
     }
+  } = vm;
 
-  };
+  if (renderMode === 1
+  /* RenderMode.Shadow */
+  && shadowMode === 1
+  /* ShadowMode.Synthetic */
+  ) {
+    for (let i = 0; i < stylesheets.length; i++) {
+      insertStylesheet(stylesheets[i]);
+    }
+  } else if (!process.env.IS_BROWSER || vm.hydrated) {
+    // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
+    //       This works in the client, because the stylesheets are created, and cached in the VM
+    //       the first time the VM renders.
+    // native shadow or light DOM, SSR
+    return shared.ArrayMap.call(stylesheets, createInlineStyleVNode);
+  } else {
+    // native shadow or light DOM, DOM renderer
+    const root = getNearestNativeShadowComponent(vm); // null root means a global style
 
-  if (features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
-    CE.prototype.connectedCallback = function () {
-      if (checkHasVM(this)) {
-        connectRootElement(this);
-      }
-    };
+    const target = shared.isNull(root) ? undefined : root.shadowRoot;
 
-    CE.prototype.disconnectedCallback = function () {
-      if (checkHasVM(this)) {
-        disconnectRootElement(this);
-      }
-    };
+    for (let i = 0; i < stylesheets.length; i++) {
+      insertStylesheet(stylesheets[i], target);
+    }
   }
 
-  defineCustomElement(tagName, CE);
-  return CE;
+  return null;
 }
 
 /*
@@ -3756,7 +3726,9 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     sel,
     owner
   } = vnode;
-  const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+  const {
+    createCustomElement
+  } = renderer;
   /**
    * Note: if the upgradable constructor does not expect, or throw when we new it
    * with a callback as the first argument, we could implement a more advanced
@@ -3765,10 +3737,25 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
    */
 
   let vm;
-  const elm = new UpgradableConstructor(elm => {
+
+  const upgradeCallback = elm => {
     // the custom element from the registry is expecting an upgrade callback
     vm = createViewModelHook(elm, vnode, renderer);
-  });
+  };
+
+  const connectedCallback = elm => {
+    if (features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      connectRootElement(elm);
+    }
+  };
+
+  const disconnectedCallback = elm => {
+    if (features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      disconnectRootElement(elm);
+    }
+  };
+
+  const elm = createCustomElement(sel, upgradeCallback, connectedCallback, disconnectedCallback);
   vnode.elm = elm;
   vnode.vm = vm;
   linkNodeToShadow(elm, owner, renderer);
@@ -3776,8 +3763,6 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
 
   if (vm) {
     allocateChildren(vnode, vm);
-  } else if (vnode.ctor !== UpgradableConstructor) {
-    throw new TypeError(`Incorrect Component Constructor`);
   }
 
   patchElementPropsAndAttrs$1(null, vnode, renderer);
@@ -6559,19 +6544,23 @@ function validateClassAttr(vnode, elm, renderer) {
     //
     // Consequently, hydration mismatches will occur if scoped CSS token classnames
     // are rendered during SSR. This needs to be accounted for when validating.
-    if (scopedToken) {
+    if (!shared.isNull(scopedToken) || !shared.isNull(stylesheetTokenHost)) {
         if (!shared.isUndefined(className)) {
-            className = shared.isNull(stylesheetTokenHost)
-                ? `${scopedToken} ${className}`
-                : `${scopedToken} ${className} ${stylesheetTokenHost}`;
+            // The order of the className should be scopedToken className stylesheetTokenHost
+            const classTokens = [scopedToken, className, stylesheetTokenHost];
+            const classNames = shared.ArrayFilter.call(classTokens, (token) => !shared.isNull(token));
+            className = shared.ArrayJoin.call(classNames, ' ');
         }
         else if (!shared.isUndefined(classMap)) {
-            classMap = Object.assign(Object.assign(Object.assign({}, classMap), { [scopedToken]: true }), (shared.isNull(stylesheetTokenHost) ? {} : { [stylesheetTokenHost]: true }));
+            classMap = Object.assign(Object.assign(Object.assign({}, classMap), (!shared.isNull(scopedToken) ? { [scopedToken]: true } : {})), (!shared.isNull(stylesheetTokenHost) ? { [stylesheetTokenHost]: true } : {}));
         }
         else {
-            className = shared.isNull(stylesheetTokenHost)
-                ? `${scopedToken}`
-                : `${scopedToken} ${stylesheetTokenHost}`;
+            // The order of the className should be scopedToken stylesheetTokenHost
+            const classTokens = [scopedToken, stylesheetTokenHost];
+            const classNames = shared.ArrayFilter.call(classTokens, (token) => !shared.isNull(token));
+            if (classNames.length) {
+                className = shared.ArrayJoin.call(classNames, ' ');
+            }
         }
     }
     let nodesAreCompatible = true;
@@ -6834,7 +6823,6 @@ exports.getAssociatedVMIfPresent = getAssociatedVMIfPresent;
 exports.getComponentConstructor = getComponentConstructor;
 exports.getComponentDef = getComponentDef;
 exports.getComponentHtmlPrototype = getComponentHtmlPrototype;
-exports.getUpgradableConstructor = getUpgradableConstructor;
 exports.hydrateRoot = hydrateRoot;
 exports.isComponentConstructor = isComponentConstructor;
 exports.parseFragment = parseFragment;
@@ -6852,4 +6840,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.25.0 */
+/* version: 2.26.0 */