lwc 2.25.0 → 2.26.0

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

@@ -299,9 +299,9 @@ function htmlPropertyToAttribute(propName) {
  * 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.
@@ -383,7 +383,7 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
         patch$1(propName);
     }
 }
-/** version: 2.25.0 */
+/** version: 2.26.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -399,7 +399,6 @@ const features = {
     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,
@@ -409,6 +408,8 @@ const features = {
     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) });
@@ -462,7 +463,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.25.0 */
+/** version: 2.26.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -1936,7 +1937,9 @@ const refsCache = new WeakMap();
 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;
@@ -2985,274 +2988,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 (!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;
 }
 
 /*
@@ -3459,244 +3401,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 (!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;
 }
 
 /*
@@ -4212,7 +4183,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
@@ -4221,10 +4194,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 (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);
@@ -4232,8 +4220,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);
@@ -7007,19 +6993,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 (!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;
@@ -7261,7 +7251,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.25.0 */
+/* version: 2.26.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7405,6 +7395,626 @@ function insertStylesheet(content, target) {
     }
 }
 
+/*
+ * 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.
@@ -7465,7 +8075,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.25.0 */
+    /** version: 2.26.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -7473,65 +8083,6 @@ function rendererFactory(baseRenderer) {
      * 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);
     }
@@ -7705,9 +8256,7 @@ function rendererFactory(baseRenderer) {
     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;
@@ -7767,6 +8316,8 @@ rendererFactory(null),
 {
     // 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),
 });
@@ -7867,36 +8418,44 @@ function deprecatedBuildCustomElementConstructor(Ctor) {
 //       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;
 }
 
 /*
@@ -7983,8 +8542,13 @@ function createElement(sel, options) {
     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
@@ -7993,9 +8557,9 @@ function createElement(sel, options) {
    * 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
     });
@@ -8004,15 +8568,21 @@ function createElement(sel, options) {
       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;
 }
 
@@ -8084,6 +8654,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.25.0 */
+/* version: 2.26.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };