lwc 2.25.0 → 2.26.0

package/dist/engine-dom/umd/es2017/engine-dom.js

@@ -305,9 +305,9 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  const LWC_VERSION = "2.25.0";
+  const LWC_VERSION = "2.26.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.25.0 */
+  /** version: 2.26.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -389,7 +389,7 @@
           patch$1(propName);
       }
   }
-  /** version: 2.25.0 */
+  /** version: 2.26.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -405,7 +405,6 @@
       DUMMY_TEST_FLAG: null,
       ENABLE_ELEMENT_PATCH: null,
       ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
-      ENABLE_HMR: null,
       ENABLE_HTML_COLLECTIONS_PATCH: null,
       ENABLE_INNER_OUTER_TEXT_PATCH: null,
       ENABLE_MIXED_SHADOW_MODE: null,
@@ -415,6 +414,8 @@
       ENABLE_REACTIVE_SETTER: null,
       ENABLE_WIRE_SYNC_EMIT: null,
       ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
+      DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
+      ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null,
   };
   if (!_globalThis.lwcRuntimeFlags) {
       Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -468,7 +469,7 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.25.0 */
+  /** version: 2.26.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1942,7 +1943,9 @@
   const LightningElement = function () {
       // This should be as performant as possible, while any initialization should be done lazily
       if (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;
@@ -2991,274 +2994,213 @@
   const activeTemplates = new WeakMap();
   const activeComponents = new WeakMap();
   const activeStyles = new WeakMap();
-
   function rehydrateHotTemplate(tpl) {
-    const list = activeTemplates.get(tpl);
-
-    if (!isUndefined$1(list)) {
-      list.forEach(vm => {
-        if (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 (!isUndefined$1(list)) {
+          list.forEach((vm) => {
+              if (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 (!isUndefined$1(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 (!isUndefined$1(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 (!isUndefined$1(list)) {
-      list.forEach(vm => {
-        const {
-          owner
-        } = vm;
-
-        if (!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 (!isUndefined$1(list)) {
+          list.forEach((vm) => {
+              const { owner } = vm;
+              if (!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 (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 (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 (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 (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 (isUndefined$1(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 (isUndefined$1(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 (!isUndefined$1(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 (isUndefined$1(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 (isUndefined$1(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 (!isUndefined$1(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 (isUndefined$1(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 (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 (!isUndefined$1(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 (!isUndefined$1(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 (!isUndefined$1(styles)) {
-          flattenStylesheets(styles).forEach(style => {
-            list = activeStyles.get(style);
-
-            if (!isUndefined$1(list)) {
+      }
+      // removing inactive template
+      const tpl = vm.cmpTemplate;
+      if (tpl) {
+          list = activeTemplates.get(tpl);
+          if (!isUndefined$1(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 (!isUndefined$1(styles)) {
+              flattenStylesheets(styles).forEach((style) => {
+                  list = activeStyles.get(style);
+                  if (!isUndefined$1(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 (!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 (!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 (!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;
   }
 
   /*
@@ -3465,244 +3407,273 @@
    * 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 (!isUndefined$1(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 (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
-          newToken = newStylesheetToken;
-      }
-      // Set the new styling token on the host element
-      if (!isUndefined$1(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 (!isUndefined$1(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 (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+      newToken = newStylesheetToken;
+    } // Set the new styling token on the host element
+
+
+    if (!isUndefined$1(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 (isArray$1(stylesheet)) {
-              ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+    const content = [];
+    let root;
+
+    for (let i = 0; i < stylesheets.length; i++) {
+      let stylesheet = stylesheets[i];
+
+      if (isArray$1(stylesheet)) {
+        ArrayPush$1.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[KEY__SCOPED_CSS];
+
+        if (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[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 (isUndefined$1(root)) {
-                      // Only calculate the root once as necessary
-                      root = getNearestShadowComponent(vm);
-                  }
-                  useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
-              }
-              ArrayPush$1.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 (isUndefined$1(root)) {
+            // Only calculate the root once as necessary
+            root = getNearestShadowComponent(vm);
           }
+
+          useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
+          /* ShadowMode.Native */
+          ;
+        }
+
+        ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
       }
-      return content;
+    }
+
+    return content;
   }
+
   function getStylesheetsContent(vm, template) {
-      const { stylesheets, stylesheetToken } = template;
-      let content = [];
-      if (!isUndefined$1(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 (!isUndefined$1(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 (!isNull(owner)) {
-          if (owner.renderMode === 1 /* RenderMode.Shadow */) {
-              return owner;
-          }
-          owner = owner.owner;
+    let owner = vm;
+
+    while (!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 !isUndefined$1(stylesheetToken) ? makeHostToken(stylesheetToken) : null;
-  }
-  function getNearestNativeShadowComponent(vm) {
-      const owner = getNearestShadowComponent(vm);
-      if (!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 (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 ArrayMap.call(stylesheets, createInlineStyleVNode);
-      }
-      else {
-          // native shadow or light DOM, DOM renderer
-          const root = getNearestNativeShadowComponent(vm);
-          // null root means a global style
-          const target = 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 !isUndefined$1(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 = !isUndefined$1(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 (!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 (!isUndefined$1(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 (isFunction$1(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 (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 ArrayMap.call(stylesheets, createInlineStyleVNode);
+    } else {
+      // native shadow or light DOM, DOM renderer
+      const root = getNearestNativeShadowComponent(vm); // null root means a global style
 
-    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
-      CE.prototype.connectedCallback = function () {
-        if (checkHasVM(this)) {
-          connectRootElement(this);
-        }
-      };
+      const target = 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;
   }
 
   /*
@@ -4218,7 +4189,9 @@
       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
@@ -4227,10 +4200,25 @@
      */
 
     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 (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        connectRootElement(elm);
+      }
+    };
+
+    const disconnectedCallback = elm => {
+      if (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);
@@ -4238,8 +4226,6 @@
 
     if (vm) {
       allocateChildren(vnode, vm);
-    } else if (vnode.ctor !== UpgradableConstructor) {
-      throw new TypeError(`Incorrect Component Constructor`);
     }
 
     patchElementPropsAndAttrs$1(null, vnode, renderer);
@@ -7013,19 +6999,23 @@
       //
       // 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 (!isNull(scopedToken) || !isNull(stylesheetTokenHost)) {
           if (!isUndefined$1(className)) {
-              className = isNull(stylesheetTokenHost)
-                  ? `${scopedToken} ${className}`
-                  : `${scopedToken} ${className} ${stylesheetTokenHost}`;
+              // The order of the className should be scopedToken className stylesheetTokenHost
+              const classTokens = [scopedToken, className, stylesheetTokenHost];
+              const classNames = ArrayFilter.call(classTokens, (token) => !isNull(token));
+              className = ArrayJoin.call(classNames, ' ');
           }
           else if (!isUndefined$1(classMap)) {
-              classMap = Object.assign(Object.assign(Object.assign({}, classMap), { [scopedToken]: true }), (isNull(stylesheetTokenHost) ? {} : { [stylesheetTokenHost]: true }));
+              classMap = Object.assign(Object.assign(Object.assign({}, classMap), (!isNull(scopedToken) ? { [scopedToken]: true } : {})), (!isNull(stylesheetTokenHost) ? { [stylesheetTokenHost]: true } : {}));
           }
           else {
-              className = isNull(stylesheetTokenHost)
-                  ? `${scopedToken}`
-                  : `${scopedToken} ${stylesheetTokenHost}`;
+              // The order of the className should be scopedToken stylesheetTokenHost
+              const classTokens = [scopedToken, stylesheetTokenHost];
+              const classNames = ArrayFilter.call(classTokens, (token) => !isNull(token));
+              if (classNames.length) {
+                  className = ArrayJoin.call(classNames, ' ');
+              }
           }
       }
       let nodesAreCompatible = true;
@@ -7267,7 +7257,7 @@
       }
       return ctor;
   }
-  /* version: 2.25.0 */
+  /* version: 2.26.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7411,6 +7401,626 @@
       }
   }
 
+  /*
+   * 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 isCustomElementRegistryAvailable() {
+      if (typeof customElements === 'undefined') {
+          return false;
+      }
+      try {
+          // dereference HTMLElement global because babel wraps globals in compat mode with a
+          // _wrapNativeSuper()
+          // This is a problem because LWCUpgradableElement extends renderer.HTMLElement which does not
+          // get wrapped by babel.
+          const HTMLElementAlias = HTMLElement;
+          // In case we use compat mode with a modern browser, the compat mode transformation
+          // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
+          // which are not equipped to be initialized that way.
+          class clazz extends HTMLElementAlias {
+          }
+          customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
+          new clazz();
+          return true;
+      }
+      catch (_a) {
+          return false;
+      }
+  }
+  const hasCustomElements = isCustomElementRegistryAvailable();
+
+  /*
+   * Copyright (c) 2018, 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
+   */
+  // Creates a custom element for compat (legacy) browser environments
+  const createCustomElementCompat = (tagName, upgradeCallback) => {
+      const elm = document.createElement(tagName);
+      upgradeCallback(elm); // nothing to do with the result for now
+      return elm;
+  };
+
+  /*
+   * Copyright (c) 2018, 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
+   */
+  const cachedConstructors = new Map();
+  const elementsUpgradedOutsideLWC = new WeakSet();
+  let elementBeingUpgradedByLWC = false;
+  // Creates a constructor that is intended to be used as a vanilla custom element, except that the upgradeCallback is
+  // passed in to the constructor so LWC can reuse the same custom element constructor for multiple components.
+  // Another benefit is that only LWC can create components that actually do anything – if you do
+  // `customElements.define('x-foo')`, then you don't have access to the upgradeCallback, so it's a dummy custom element.
+  // This class should be created once per tag name.
+  const createUpgradableConstructor = (connectedCallback, disconnectedCallback) => {
+      // TODO [#2972]: this class should expose observedAttributes as necessary
+      return class UpgradableConstructor extends HTMLElement {
+          constructor(upgradeCallback) {
+              super();
+              // If the element is not created using lwc.createElement(), e.g. `document.createElement('x-foo')`,
+              // then elementBeingUpgraded will be false
+              if (elementBeingUpgradedByLWC) {
+                  upgradeCallback(this);
+              }
+              else {
+                  // keep track of elements that were not created by lwc.createElement,
+                  // so we can ignore their lifecycle hooks
+                  elementsUpgradedOutsideLWC.add(this);
+                  // TODO [#2970]: LWC elements cannot be upgraded via new Ctor()
+                  // Do we want to support this? Throw an error? Currently for backwards compat it's a no-op.
+              }
+          }
+          connectedCallback() {
+              if (!elementsUpgradedOutsideLWC.has(this)) {
+                  connectedCallback(this);
+              }
+          }
+          disconnectedCallback() {
+              if (!elementsUpgradedOutsideLWC.has(this)) {
+                  disconnectedCallback(this);
+              }
+          }
+      };
+  };
+  const createCustomElementVanilla = (tagName, upgradeCallback, connectedCallback, disconnectedCallback) => {
+      // use global custom elements registry
+      let UpgradableConstructor = cachedConstructors.get(tagName);
+      if (isUndefined$1(UpgradableConstructor)) {
+          if (!isUndefined$1(customElements.get(tagName))) {
+              throw new Error(`Unexpected tag name "${tagName}". This name is a registered custom element, preventing LWC to upgrade the element.`);
+          }
+          UpgradableConstructor = createUpgradableConstructor(connectedCallback, disconnectedCallback);
+          customElements.define(tagName, UpgradableConstructor);
+          cachedConstructors.set(tagName, UpgradableConstructor);
+      }
+      elementBeingUpgradedByLWC = true;
+      try {
+          return new UpgradableConstructor(upgradeCallback);
+      }
+      finally {
+          elementBeingUpgradedByLWC = false;
+      }
+  };
+
+  /*
+   * 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
+   */
+  /**
+   * Create a scoped registry, i.e. a function that can create custom elements whose tag names
+   * do not conflict with vanilla custom elements having the same tag name.
+   */
+  function createScopedRegistry() {
+      if (!hasCustomElements) {
+          // This code should never be reached, because we don't use the pivot registry if
+          // custom elements are unavailable.
+          throw new Error('Custom elements are not supported in this environment.');
+      }
+      const { HTMLElement: NativeHTMLElement } = window;
+      const { hasAttribute: nativeHasAttribute, setAttribute: nativeSetAttribute, removeAttribute: nativeRemoveAttribute, getAttribute: nativeGetAttribute, } = NativeHTMLElement.prototype;
+      const definitionForElement = new WeakMap();
+      const pendingRegistryForElement = new WeakMap();
+      const definitionForConstructor = new WeakMap();
+      const registeredUserCtors = new WeakSet();
+      const pivotCtorByTag = new Map();
+      const globalDefinitionsByTag = new Map();
+      const globalDefinitionsByClass = new Map();
+      const awaitingUpgrade = new Map();
+      const EMPTY_SET = new Set();
+      function createDefinitionRecord(constructor) {
+          var _a;
+          const { connectedCallback, disconnectedCallback, adoptedCallback, attributeChangedCallback, } = constructor.prototype;
+          const observedAttributes = new Set((_a = constructor.observedAttributes) !== null && _a !== void 0 ? _a : []);
+          return {
+              UserCtor: constructor,
+              PivotCtor: undefined,
+              connectedCallback,
+              disconnectedCallback,
+              adoptedCallback,
+              attributeChangedCallback,
+              observedAttributes,
+          };
+      }
+      // Helper to create stand-in element for each tagName registered that delegates out to the registry for the given
+      // element. Note that the `registeredDefinition` represents the constructor that was used to register during
+      // `customElements.define()`. Whereas the `pivotDefinition` represents the constructor that is passed when the pivot
+      // constructor is invoked with another constructor.
+      function createPivotingClass(tagName, registeredDefinition) {
+          class PivotCtor extends NativeHTMLElement {
+              constructor(UserCtor) {
+                  // This constructor can only be invoked by:
+                  // a) the browser instantiating  an element from parsing or via document.createElement.
+                  // b) LWC new PivotClass (This constructor is NOT observable/accessible in user-land).
+                  // b) new UserClass.
+                  // When LWC instantiates it, it will pass the upgrading definition as an argument
+                  // If the caller signals via UserCtor that this is in fact a controlled
+                  // definition, we use that one, otherwise fallback to the global
+                  // internal registry.
+                  super();
+                  const userCtorIsDefined = !isUndefined$1(UserCtor);
+                  if (userCtorIsDefined) {
+                      if (!isConstructor(UserCtor)) {
+                          throw new TypeError(`Failed to create custom element: the provided constructor is not a constructor.`);
+                      }
+                      if (!registeredUserCtors.has(UserCtor)) {
+                          throw new Error(`Failed to create custom element: the provided constructor is unregistered: ${UserCtor.name}.`);
+                      }
+                  }
+                  const definition = userCtorIsDefined
+                      ? getOrCreateDefinitionForConstructor(UserCtor)
+                      : globalDefinitionsByTag.get(tagName);
+                  if (!isUndefined$1(definition)) {
+                      internalUpgrade(this, registeredDefinition, definition);
+                  }
+                  else {
+                      // This is the case in which there is no global definition, and
+                      // it is not handled by LWC (otherwise it will have a valid UserCtor)
+                      // so we need to add it to the pending queue just in case it eventually
+                      // gets defined in the global registry.
+                      pendingRegistryForElement.set(this, registeredDefinition);
+                  }
+              }
+              connectedCallback() {
+                  var _a;
+                  const definition = definitionForElement.get(this);
+                  if (!isUndefined$1(definition)) {
+                      // Delegate out to user callback
+                      (_a = definition.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+                  }
+                  else {
+                      // Register for upgrade when defined (only when connected, so we don't leak)
+                      let awaiting = awaitingUpgrade.get(tagName);
+                      if (isUndefined$1(awaiting)) {
+                          awaitingUpgrade.set(tagName, (awaiting = new Set()));
+                      }
+                      awaiting.add(this);
+                  }
+              }
+              disconnectedCallback() {
+                  var _a;
+                  const definition = definitionForElement.get(this);
+                  if (!isUndefined$1(definition)) {
+                      // Delegate out to user callback
+                      (_a = definition.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+                  }
+                  else {
+                      // Un-register for upgrade when defined (so we don't leak)
+                      const awaiting = awaitingUpgrade.get(tagName);
+                      // At this point, awaiting should never be undefined, because connectedCallback
+                      // must have been called before disconnectedCallback. But just to be safe, we check
+                      if (!isUndefined$1(awaiting)) {
+                          awaiting.delete(this);
+                      }
+                  }
+              }
+              adoptedCallback() {
+                  var _a;
+                  const definition = definitionForElement.get(this);
+                  (_a = definition === null || definition === void 0 ? void 0 : definition.adoptedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+              }
+              attributeChangedCallback(name, oldValue, newValue) {
+                  var _a;
+                  const definition = definitionForElement.get(this);
+                  // if both definitions are the same, then the observedAttributes is the same,
+                  // but if they are different, only if the runtime definition has the attribute
+                  // marked as observed, then it should invoke attributeChangedCallback.
+                  if (registeredDefinition === definition ||
+                      (definition === null || definition === void 0 ? void 0 : definition.observedAttributes.has(name))) {
+                      (_a = definition.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.apply(this, [name, oldValue, newValue]);
+                  }
+              }
+          }
+          PivotCtor.observedAttributes = [...registeredDefinition.observedAttributes];
+          return PivotCtor;
+      }
+      function getNewObservedAttributes(registeredDefinition, pivotDefinition) {
+          const { observedAttributes, attributeChangedCallback } = pivotDefinition;
+          if (observedAttributes.size === 0 || isUndefined$1(attributeChangedCallback)) {
+              // This instance does not need to observe any attributes, no need to patch
+              return EMPTY_SET;
+          }
+          // Natively, the attributes observed by the registered definition are going to be taken
+          // care of by the browser, only the difference between the two sets has to be taken
+          // care by the patched version.
+          return new Set([...pivotDefinition.observedAttributes].filter((x) => !registeredDefinition.observedAttributes.has(x)));
+      }
+      function throwAsyncError(error) {
+          // Per native custom element behavior, errors thrown in attributeChangedCallback
+          // become unhandled async errors. We use setTimeout() instead of Promise.resolve()
+          // to make it an unhandled error rather than an unhandled rejection.
+          setTimeout(() => {
+              throw error;
+          });
+      }
+      // Helper to patch `setAttribute`/`getAttribute` to implement `attributeChangedCallback`.
+      // Why is this necessary? Well basically, you can't change the `observedAttributes` after
+      // a custom element is defined. So with pivots, if two classes share the same tag name,
+      // and the second class observes attributes that aren't observed by the first one,
+      // then those attributes can never be observed by the native `observedAttributes` system.
+      // So we have to simulate it by patching `getAttribute`/`removeAttribute`. Note that
+      // we only do this when absolutely necessary, though; i.e. because we've determined
+      // that we aren't observing the attributes we need to.
+      function patchAttributes(instance, registeredDefinition, pivotDefinition) {
+          const newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
+          if (newObservedAttributes.size === 0) {
+              return;
+          }
+          const { attributeChangedCallback } = pivotDefinition;
+          // Patch the instance.
+          // Note we use the native `getAttribute` rather than the super's `getAttribute` because
+          // we don't actually want it to be observable that we're calling `getAttribute` from
+          // `setAttribute` and `removeAttribute`.
+          // TODO [#2994]: this should handle reflected properties such as `ariaLabel` and `role`.
+          defineProperties(instance, {
+              setAttribute: {
+                  value: function setAttribute(name, value) {
+                      if (newObservedAttributes.has(name)) {
+                          const old = nativeGetAttribute.call(this, name);
+                          nativeSetAttribute.call(this, name, value);
+                          try {
+                              attributeChangedCallback.call(this, name, old, value + '');
+                          }
+                          catch (error) {
+                              throwAsyncError(error);
+                          }
+                      }
+                      else {
+                          nativeSetAttribute.call(this, name, value);
+                      }
+                  },
+                  writable: true,
+                  enumerable: true,
+                  configurable: true,
+              },
+              removeAttribute: {
+                  value: function removeAttribute(name) {
+                      if (newObservedAttributes.has(name)) {
+                          const old = nativeGetAttribute.call(this, name);
+                          nativeRemoveAttribute.call(this, name);
+                          try {
+                              attributeChangedCallback.call(this, name, old, null);
+                          }
+                          catch (error) {
+                              throwAsyncError(error);
+                          }
+                      }
+                      else {
+                          nativeRemoveAttribute.call(this, name);
+                      }
+                  },
+                  writable: true,
+                  enumerable: true,
+                  configurable: true,
+              },
+          });
+      }
+      function patchAttributesDuringUpgrade(instance, registeredDefinition, pivotDefinition) {
+          // The below case patches observed attributes for the case where the HTML element is upgraded
+          // from a pre-existing one in the DOM.
+          const newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
+          if (getNewObservedAttributes(registeredDefinition, pivotDefinition).size === 0) {
+              return;
+          }
+          const { attributeChangedCallback } = pivotDefinition;
+          // Approximate observedAttributes from the user class, but only for the new observed attributes
+          newObservedAttributes.forEach((name) => {
+              if (nativeHasAttribute.call(instance, name)) {
+                  const newValue = nativeGetAttribute.call(instance, name);
+                  attributeChangedCallback.call(instance, name, null, newValue);
+              }
+          });
+      }
+      // User extends this HTMLElement, which returns the CE being upgraded
+      let upgradingInstance;
+      // Helper to upgrade an instance with a CE definition using "constructor call trick"
+      function internalUpgrade(instance, registeredDefinition, pivotDefinition) {
+          setPrototypeOf(instance, pivotDefinition.UserCtor.prototype);
+          definitionForElement.set(instance, pivotDefinition);
+          // attributes patches when needed
+          if (pivotDefinition !== registeredDefinition) {
+              patchAttributes(instance, registeredDefinition, pivotDefinition);
+          }
+          // Tricking the construction path to believe that a new instance is being created,
+          // that way it will execute the super initialization mechanism but the HTMLElement
+          // constructor will reuse the instance by returning the upgradingInstance.
+          // This is by far the most important piece of the puzzle
+          upgradingInstance = instance;
+          // By `new`ing the UserCtor, we now jump to the constructor for the overridden global HTMLElement
+          // The reason this happens is that the UserCtor extends HTMLElement, so it calls the `super()`.
+          // Note that `upgradingInstance` is explicitly handled in the HTMLElement constructor.
+          new pivotDefinition.UserCtor();
+          patchAttributesDuringUpgrade(instance, registeredDefinition, pivotDefinition);
+      }
+      function isConstructor(constructor) {
+          return isFunction$1(constructor) && isObject(constructor.prototype);
+      }
+      function getOrCreateDefinitionForConstructor(constructor) {
+          if (!isConstructor(constructor)) {
+              throw new TypeError('The referenced constructor is not a constructor.');
+          }
+          const definition = definitionForConstructor.get(constructor);
+          if (!isUndefined$1(definition)) {
+              return definition;
+          }
+          return createDefinitionRecord(constructor);
+      }
+      const { customElements: nativeRegistry } = window;
+      const { define: nativeDefine, whenDefined: nativeWhenDefined, get: nativeGet } = nativeRegistry;
+      // patch for the global registry define mechanism
+      CustomElementRegistry.prototype.define = function define(tagName, constructor, options) {
+          if (options && options.extends) {
+              // TODO [#2983]: should we support `extends`?
+              throw new DOMException('NotSupportedError: "extends" key in customElements.define() options is not supported.');
+          }
+          if (globalDefinitionsByTag.has(tagName)) {
+              throw new DOMException(`Failed to execute 'define' on 'CustomElementRegistry': the name "${tagName}" has already been used with this registry`);
+          }
+          if (!isUndefined$1(globalDefinitionsByClass.get(constructor))) {
+              throw new DOMException(`Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry`);
+          }
+          const definition = getOrCreateDefinitionForConstructor(constructor);
+          registeredUserCtors.add(constructor);
+          let PivotCtor = pivotCtorByTag.get(tagName);
+          if (isUndefined$1(PivotCtor)) {
+              PivotCtor = createPivotingClass(tagName, definition);
+              // Register a pivoting class which will handle global registry initializations
+              nativeDefine.call(nativeRegistry, tagName, PivotCtor);
+          }
+          // Only cache after nativeDefine has been called, because if it throws an error
+          // (e.g. for an invalid tag name), then we don't want to cache anything.
+          definitionForConstructor.set(constructor, definition);
+          pivotCtorByTag.set(tagName, PivotCtor);
+          globalDefinitionsByTag.set(tagName, definition);
+          globalDefinitionsByClass.set(constructor, definition);
+          // For globally defined custom elements, the definition associated
+          // to the UserCtor has a back-pointer to PivotCtor in case the user
+          // new the UserCtor, so we know how to create the underlying element.
+          definition.PivotCtor = PivotCtor;
+          // Upgrade any elements created in this scope before customElements.define
+          // was called, which should be exhibited by the following steps:
+          // 1) LWC registers a tagName for an LWC component.
+          // 2) Element with same tagName is created with document.createElement()
+          //    and inserted into DOM.
+          // 3) customElements.define() is called with tagName and non-LWC constructor.
+          // This requires immediate upgrade when the new global tagName is defined.
+          const awaiting = awaitingUpgrade.get(tagName);
+          if (!isUndefined$1(awaiting)) {
+              awaitingUpgrade.delete(tagName);
+              for (const element of awaiting) {
+                  const registeredDefinition = pendingRegistryForElement.get(element);
+                  // At this point, registeredDefinition should never be undefined because awaitingUpgrade
+                  // is only populated when we haven't run internalUpgrade yet, and we only populate
+                  // pendingRegistryForElement when internalUpgrade hasn't run yet.
+                  // But just to be safe, we check.
+                  if (!isUndefined$1(registeredDefinition)) {
+                      pendingRegistryForElement.delete(element);
+                      internalUpgrade(element, registeredDefinition, definition);
+                  }
+              }
+          }
+      };
+      CustomElementRegistry.prototype.get = function get(tagName) {
+          const NativeCtor = nativeGet.call(nativeRegistry, tagName);
+          if (!isUndefined$1(NativeCtor)) {
+              const definition = globalDefinitionsByTag.get(tagName);
+              if (!isUndefined$1(definition)) {
+                  return definition.UserCtor; // defined by the patched custom elements registry
+              }
+              // TODO [#3073]: return undefined rather than the pivot constructor (NativeCtor)
+              return NativeCtor; // return the pivot constructor or constructor that existed before patching
+          }
+      };
+      CustomElementRegistry.prototype.whenDefined = function whenDefined(tagName) {
+          return nativeWhenDefined.call(nativeRegistry, tagName).then((NativeCtor) => {
+              const definition = globalDefinitionsByTag.get(tagName);
+              if (!isUndefined$1(definition)) {
+                  return definition.UserCtor;
+              }
+              // TODO [#3073]: return undefined rather than the pivot constructor (NativeCtor)
+              // In this case, the custom element must have been defined before the registry patches
+              // were applied. So return the non-pivot constructor
+              if (isUndefined$1(NativeCtor)) {
+                  // Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1335247
+                  // We can patch the correct behavior using customElements.get()
+                  return nativeGet.call(nativeRegistry, tagName);
+              }
+              return NativeCtor;
+          });
+      };
+      // This constructor is invoked when we call `new pivotDefinition.UserCtor()`
+      // @ts-ignore
+      window.HTMLElement = function HTMLElement() {
+          // Upgrading case: the pivoting class constructor was run by the browser's
+          // native custom elements and we're in the process of running the
+          // "constructor-call trick" on the natively constructed instance, so just
+          // return that here.
+          // This code path is also called when LWC `new`s a PivotCtor.
+          const instance = upgradingInstance;
+          if (!isUndefined$1(instance)) {
+              upgradingInstance = undefined;
+              return instance;
+          }
+          // Construction case: we need to construct the pivoting instance and return it.
+          // This is possible when the user register it via global registry and instantiate
+          // it via `new Ctor()`.
+          const { constructor } = this;
+          const definition = globalDefinitionsByClass.get(constructor);
+          if (isUndefined$1(definition) || isUndefined$1(definition.PivotCtor)) {
+              // This code path is hit if someone `new`s a class that extends `HTMLElement` without
+              // doing `customElements.define()` first. This matches native browser behavior:
+              // https://stackoverflow.com/a/61883392
+              throw new TypeError('Illegal constructor');
+          }
+          // This constructor is ONLY invoked when it is the user instantiating
+          // an element via new Ctor while Ctor is a registered global constructor.
+          const { PivotCtor, UserCtor } = definition;
+          return new PivotCtor(UserCtor);
+      };
+      HTMLElement.prototype = NativeHTMLElement.prototype;
+      /**
+       * Create a new PivotConstructor for the given tagName, which is capable of being constructed
+       * with a UserConstructor defining the behavior. Passing in the UserConstructor here
+       * is a hint that can be used when registering a custom element with the global custom elements
+       * registry for the first time, which provides certain optimizations. It also marks the UserConstructor
+       * as "safe" to be used when passed in to a PivotConstructor.
+       *
+       * @param tagName - element tag name
+       * @param UserCtor - userland custom element constructor
+       * @returns a new custom element constructor
+       */
+      return function createPivotConstructor(tagName, UserCtor) {
+          tagName = StringToLowerCase.call(tagName);
+          let PivotCtor = pivotCtorByTag.get(tagName);
+          if (isUndefined$1(PivotCtor)) {
+              const definition = getOrCreateDefinitionForConstructor(UserCtor);
+              PivotCtor = createPivotingClass(tagName, definition);
+              // Register a pivoting class as a global custom element
+              nativeDefine.call(nativeRegistry, tagName, PivotCtor);
+              definition.PivotCtor = PivotCtor;
+              // Only cache after nativeDefine has been called, because if it throws an error
+              // (e.g. for an invalid tag name), then we don't want to cache anything.
+              definitionForConstructor.set(UserCtor, definition);
+              pivotCtorByTag.set(tagName, PivotCtor);
+          }
+          // Register a UserConstructor as "safe" to be used within a PivotConstructor
+          registeredUserCtors.add(UserCtor);
+          return PivotCtor;
+      };
+  }
+
+  /*
+   * Copyright (c) 2018, 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
+   */
+  let createScopedConstructor;
+  let CachedHTMLElement; // We only call `createScopedRegistry()` if the browser supports custom elements and
+  // ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is enabled, because we don't want to patch eagerly if the flag is disabled
+  // or we're in a legacy browser.
+
+  if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
+    if (hasCustomElements) {
+      // If ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is true, then we eagerly initialize the scoped registry.
+      // It's assumed that ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is set *before* LWC loads, and never changes.
+      //
+      // Why not lazily patch in `createCustomElement`? Well, this could lead to subtle bugs, e.g.:
+      //
+      // 1. LWC loads
+      // 2. `const Ctor = class extends HTMLElement {}`
+      // 3. `lwc.createElement(...)` // here we lazily patch
+      // 4. `customElements.define('x-foo', Ctor)` // throws error because class is bound to stale HTMLElement
+      //
+      // To reduce the risk of this, it's safer to patch the registry eagerly.
+      createScopedConstructor = createScopedRegistry(); // It's important to cache window.HTMLElement here. Otherwise, someone else could overwrite window.HTMLElement (e.g.
+      // another copy of the engine, or another scoping implementation) and we would get "Illegal constructor" errors
+      // because the HTMLElement prototypes are mixed up.
+      //
+      // The reason this happens is that the scoping implementation overwrites window.HTMLElement and expects to work
+      // with that version of HTMLElement. So if you load two copies of the scoping implementation in the same environment,
+      // the second one may accidentally grab window.HTMLElement from the first (when doing `class extends HTMLElement`).
+      // Caching avoids this problem.
+
+      CachedHTMLElement = window.HTMLElement;
+    }
+  } // Creates a constructor that is intended to be used as the UserConstructor in a scoped (pivots) registry.
+  // In this case, the upgradeCallback only needs to be defined once because we create these on-demand,
+  // multiple times per tag name.
+
+
+  const createUserConstructor = (upgradeCallback, connectedCallback, disconnectedCallback, HTMLElementToExtend) => {
+    // TODO [#2972]: this class should expose observedAttributes as necessary
+    return class UserConstructor extends HTMLElementToExtend {
+      constructor() {
+        super();
+        upgradeCallback(this);
+      }
+
+      connectedCallback() {
+        connectedCallback(this);
+      }
+
+      disconnectedCallback() {
+        disconnectedCallback(this);
+      }
+
+    };
+  };
+
+  function createCustomElementScoped(tagName, upgradeCallback, connectedCallback, disconnectedCallback) {
+    if (isUndefined$1(createScopedConstructor) || isUndefined$1(CachedHTMLElement)) {
+      // This error should be impossible to hit
+      throw new Error('The flag ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY must be set to true to use this feature');
+    }
+
+    const UserConstructor = createUserConstructor(upgradeCallback, connectedCallback, disconnectedCallback, CachedHTMLElement);
+    const ScopedConstructor = createScopedConstructor(tagName, UserConstructor);
+    return new ScopedConstructor(UserConstructor);
+  }
+
+  /*
+   * Copyright (c) 2018, 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
+   */
+  /**
+   * We have three modes for creating custom elements:
+   *
+   * 1. Compat (legacy) browser support (e.g. IE11). Totally custom, doesn't rely on native browser APIs.
+   * 2. "Vanilla" custom elements registry. This system actually still allows us to have two LWC components with the
+   *    same tag name, via a simple trick: every custom element constructor we define in the registry is basically
+   *    the same. It's essentially a dummy `class extends HTMLElement` that accepts an `upgradeCallback` in its
+   *    constructor, which allows us to have completely customized functionality for different components.
+   * 3. "Scoped" (or "pivot") custom elements. This relies on a sophisticated system that emulates the "scoped custom
+   *    elements registry" proposal, with support for avoiding conflicts in tag names both between LWC components and
+   *    between LWC components and third-party elements. This uses a similar trick to #2, but is much more complex
+   *    because it must patch the global `customElements` and `HTMLElement` objects.
+   */
+
+  let createCustomElement;
+
+  if (hasCustomElements) {
+    if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
+      createCustomElement = createCustomElementScoped;
+    } else {
+      // use global custom elements registry (vanilla)
+      createCustomElement = createCustomElementVanilla;
+    }
+  } else {
+    // no registry available here
+    createCustomElement = createCustomElementCompat;
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -7471,7 +8081,7 @@
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.25.0 */
+      /** version: 2.26.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -7479,65 +8089,6 @@
        * SPDX-License-Identifier: MIT
        * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
        */
-      exports.getCustomElement = void 0;
-      exports.defineCustomElement = void 0;
-      let HTMLElementConstructor;
-      function isCustomElementRegistryAvailable() {
-          if (typeof customElements === 'undefined') {
-              return false;
-          }
-          try {
-              // dereference HTMLElement global because babel wraps globals in compat mode with a
-              // _wrapNativeSuper()
-              // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
-              // get wrapped by babel.
-              const HTMLElementAlias = HTMLElement;
-              // In case we use compat mode with a modern browser, the compat mode transformation
-              // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
-              // which are not equipped to be initialized that way.
-              class clazz extends HTMLElementAlias {
-              }
-              customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
-              new clazz();
-              return true;
-          }
-          catch (_a) {
-              return false;
-          }
-      }
-      if (isCustomElementRegistryAvailable()) {
-          exports.getCustomElement = customElements.get.bind(customElements);
-          exports.defineCustomElement = customElements.define.bind(customElements);
-          HTMLElementConstructor = HTMLElement;
-      }
-      else {
-          const registry = Object.create(null);
-          const reverseRegistry = new WeakMap();
-          exports.defineCustomElement = function define(name, ctor) {
-              if (name !== String.prototype.toLowerCase.call(name) || registry[name]) {
-                  throw new TypeError(`Invalid Registration`);
-              }
-              registry[name] = ctor;
-              reverseRegistry.set(ctor, name);
-          };
-          exports.getCustomElement = function get(name) {
-              return registry[name];
-          };
-          HTMLElementConstructor = function HTMLElement() {
-              if (!(this instanceof HTMLElement)) {
-                  throw new TypeError(`Invalid Invocation`);
-              }
-              const { constructor } = this;
-              const name = reverseRegistry.get(constructor);
-              if (!name) {
-                  throw new TypeError(`Invalid Construction`);
-              }
-              const elm = document.createElement(name);
-              Object.setPrototypeOf(elm, constructor.prototype);
-              return elm;
-          };
-          HTMLElementConstructor.prototype = HTMLElement.prototype;
-      }
       function cloneNode(node, deep) {
           return node.cloneNode(deep);
       }
@@ -7711,9 +8262,7 @@
       function assertInstanceOfHTMLElement(elm, msg) {
           assert.invariant(elm instanceof HTMLElement, msg);
       }
-      const HTMLElementExported = HTMLElementConstructor;
 
-      exports.HTMLElementExported = HTMLElementExported;
       exports.addEventListener = addEventListener;
       exports.assertInstanceOfHTMLElement = assertInstanceOfHTMLElement;
       exports.attachShadow = attachShadow;
@@ -7773,6 +8322,8 @@
   {
       // insertStyleSheet implementation shares a global cache of stylesheet data
       insertStylesheet,
+      // relies on a shared global cache
+      createCustomElement,
       isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
       isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
   });
@@ -7873,36 +8424,44 @@
   //       This WeakSet usage is valid because this functionality is not meant to run in IE11.
   const hydratedCustomElements = new WeakSet();
   function buildCustomElementConstructor(Ctor) {
+      var _a;
       const HtmlPrototype = getComponentHtmlPrototype(Ctor);
-      return class extends HtmlPrototype {
-          constructor() {
-              super();
-              if (this.isConnected) {
-                  // this if block is hit when there's already an un-upgraded element in the DOM with the same tag name.
-                  hydrateComponent(this, Ctor, {});
-                  hydratedCustomElements.add(this);
+      const { observedAttributes } = HtmlPrototype;
+      const { attributeChangedCallback } = HtmlPrototype.prototype;
+      return _a = class extends HTMLElement {
+              constructor() {
+                  super();
+                  if (this.isConnected) {
+                      // this if block is hit when there's already an un-upgraded element in the DOM with the same tag name.
+                      hydrateComponent(this, Ctor, {});
+                      hydratedCustomElements.add(this);
+                  }
+                  else {
+                      createVM(this, Ctor, renderer, {
+                          mode: 'open',
+                          owner: null,
+                          tagName: this.tagName,
+                      });
+                  }
               }
-              else {
-                  createVM(this, Ctor, renderer, {
-                      mode: 'open',
-                      owner: null,
-                      tagName: this.tagName,
-                  });
+              connectedCallback() {
+                  if (hydratedCustomElements.has(this)) {
+                      // This is an un-upgraded element that was hydrated in the constructor.
+                      hydratedCustomElements.delete(this);
+                  }
+                  else {
+                      connectRootElement(this);
+                  }
               }
-          }
-          connectedCallback() {
-              if (hydratedCustomElements.has(this)) {
-                  // This is an un-upgraded element that was hydrated in the constructor.
-                  hydratedCustomElements.delete(this);
+              disconnectedCallback() {
+                  disconnectRootElement(this);
               }
-              else {
-                  connectRootElement(this);
+              attributeChangedCallback(name, oldValue, newValue) {
+                  attributeChangedCallback.call(this, name, oldValue, newValue);
               }
-          }
-          disconnectedCallback() {
-              disconnectRootElement(this);
-          }
-      };
+          },
+          _a.observedAttributes = observedAttributes,
+          _a;
   }
 
   /*
@@ -7989,8 +8548,13 @@
       throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
     }
 
-    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
-    let wasComponentUpgraded = false; // the custom element from the registry is expecting an upgrade callback
+    const {
+      createCustomElement
+    } = renderer; // tagName must be all lowercase, unfortunately, we have legacy code that is
+    // passing `sel` as a camel-case, which makes them invalid custom elements name
+    // the following line guarantees that this does not leaks beyond this point.
+
+    const tagName = StringToLowerCase.call(sel); // the custom element from the registry is expecting an upgrade callback
 
     /**
      * Note: if the upgradable constructor does not expect, or throw when we new it
@@ -7999,9 +8563,9 @@
      * an upgradable custom element.
      */
 
-    const element = new UpgradableConstructor(elm => {
+    const upgradeCallback = elm => {
       createVM(elm, Ctor, renderer, {
-        tagName: sel,
+        tagName,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
         owner: null
       });
@@ -8010,15 +8574,21 @@
         ConnectingSlot.set(elm, connectRootElement);
         DisconnectingSlot.set(elm, disconnectRootElement);
       }
+    };
 
-      wasComponentUpgraded = true;
-    });
+    const connectedCallback = elm => {
+      if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        connectRootElement(elm);
+      }
+    };
 
-    if (!wasComponentUpgraded) {
-      /* eslint-disable-next-line no-console */
-      console.error(`Unexpected tag name "${sel}". This name is a registered custom element, preventing LWC to upgrade the element.`);
-    }
+    const disconnectedCallback = elm => {
+      if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        disconnectRootElement(elm);
+      }
+    };
 
+    const element = createCustomElement(tagName, upgradeCallback, connectedCallback, disconnectedCallback);
     return element;
   }
 
@@ -8090,7 +8660,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.25.0 */
+  /* version: 2.26.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;