lwc 2.25.1 → 2.26.0

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

@@ -294,7 +294,7 @@
       CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
       return attributeName;
   }
-  /** version: 2.25.1 */
+  /** version: 2.26.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -376,7 +376,7 @@
           patch$1(propName);
       }
   }
-  /** version: 2.25.1 */
+  /** version: 2.26.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -392,7 +392,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,
@@ -403,6 +402,7 @@
       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) });
@@ -1387,7 +1387,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;
@@ -2167,34 +2169,19 @@
   freeze(BaseBridgeElement);
   seal(BaseBridgeElement.prototype);
   function setActiveVM(vm) {
-    {
-      // this method should never leak to prod
-      throw new ReferenceError();
-    }
+      {
+          // this method should never leak to prod
+          throw new ReferenceError();
+      }
   }
   function swapTemplate(oldTpl, newTpl) {
-
-    if (!lwcRuntimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
-    }
-
-    return false;
+      return false;
   }
   function swapComponent(oldComponent, newComponent) {
-
-    if (!lwcRuntimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
-    }
-
-    return false;
+      return false;
   }
   function swapStyle(oldStyle, newStyle) {
-
-    if (!lwcRuntimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
-    }
-
-    return false;
+      return false;
   }
 
   /*
@@ -2573,15 +2560,18 @@
   /**
    * 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
-      }
+      template
     } = getComponentInternalDef(vnode.ctor);
-    return !isUndefined$1(stylesheetToken) ? makeHostToken(stylesheetToken) : null;
+    const {
+      stylesheetToken
+    } = template;
+    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
   }
 
   function getNearestNativeShadowComponent(vm) {
@@ -2635,69 +2625,6 @@
     return 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));
-
-    return hasVM;
-  }
-
-  function getUpgradableConstructor(tagName, renderer) {
-    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
-        }
-      }
-
-    };
-
-    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
-      CE.prototype.connectedCallback = function () {
-        if (checkHasVM(this)) {
-          connectRootElement(this);
-        }
-      };
-
-      CE.prototype.disconnectedCallback = function () {
-        if (checkHasVM(this)) {
-          disconnectRootElement(this);
-        }
-      };
-    }
-
-    defineCustomElement(tagName, CE);
-    return CE;
-  }
-
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -3185,7 +3112,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
@@ -3194,10 +3123,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);
@@ -3205,8 +3149,6 @@
 
     if (vm) {
       allocateChildren(vnode, vm);
-    } else if (vnode.ctor !== UpgradableConstructor) {
-      throw new TypeError(`Incorrect Component Constructor`);
     }
 
     patchElementPropsAndAttrs$1(null, vnode, renderer);
@@ -5562,19 +5504,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;
@@ -5703,7 +5649,7 @@
       }
       return ctor;
   }
-  /* version: 2.25.1 */
+  /* version: 2.26.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5838,6 +5784,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.
@@ -5898,7 +6464,7 @@
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.25.1 */
+      /** version: 2.26.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -5906,65 +6472,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);
       }
@@ -6138,9 +6645,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;
@@ -6200,6 +6705,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),
   });
@@ -6295,36 +6802,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;
   }
 
   /*
@@ -6408,8 +6923,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
@@ -6418,9 +6938,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
       });
@@ -6429,15 +6949,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;
   }
 
@@ -6509,7 +7035,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.25.1 */
+  /* version: 2.26.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;