lwc 2.25.1 → 2.27.0

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

@@ -46,7 +46,7 @@ var LWC = (function (exports) {
    */
   const { assign, create, defineProperties, defineProperty, freeze, getOwnPropertyDescriptor: getOwnPropertyDescriptor$1, getOwnPropertyNames: getOwnPropertyNames$1, getPrototypeOf: getPrototypeOf$1, hasOwnProperty: hasOwnProperty$1, isFrozen, keys, seal, setPrototypeOf, } = Object;
   const { isArray: isArray$1 } = Array;
-  const { copyWithin: ArrayCopyWithin, fill: ArrayFill, filter: ArrayFilter, find: ArrayFind, indexOf: ArrayIndexOf, join: ArrayJoin, map: ArrayMap, pop: ArrayPop, push: ArrayPush$1, reduce: ArrayReduce, reverse: ArrayReverse, shift: ArrayShift, slice: ArraySlice, sort: ArraySort, splice: ArraySplice, unshift: ArrayUnshift, forEach, } = Array.prototype;
+  const { concat: ArrayConcat$1, copyWithin: ArrayCopyWithin, fill: ArrayFill, filter: ArrayFilter, find: ArrayFind, indexOf: ArrayIndexOf, join: ArrayJoin, map: ArrayMap, pop: ArrayPop, push: ArrayPush$1, reduce: ArrayReduce, reverse: ArrayReverse, shift: ArrayShift, slice: ArraySlice, sort: ArraySort, splice: ArraySplice, unshift: ArrayUnshift, forEach, } = Array.prototype;
   const { fromCharCode: StringFromCharCode } = String;
   const { charCodeAt: StringCharCodeAt, replace: StringReplace, slice: StringSlice, toLowerCase: StringToLowerCase, } = String.prototype;
   function isUndefined$1(obj) {
@@ -302,9 +302,9 @@ var LWC = (function (exports) {
    * 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.1";
+  const LWC_VERSION = "2.27.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.25.1 */
+  /** version: 2.27.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -386,7 +386,7 @@ var LWC = (function (exports) {
           patch$1(propName);
       }
   }
-  /** version: 2.25.1 */
+  /** version: 2.27.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -402,7 +402,6 @@ var LWC = (function (exports) {
       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,
@@ -413,6 +412,7 @@ var LWC = (function (exports) {
       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) });
@@ -466,7 +466,7 @@ var LWC = (function (exports) {
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.25.1 */
+  /** version: 2.27.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1940,7 +1940,9 @@ var LWC = (function (exports) {
   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;
@@ -2989,274 +2991,213 @@ var LWC = (function (exports) {
   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;
   }
 
   /*
@@ -3667,15 +3608,18 @@ var LWC = (function (exports) {
   /**
    * 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) {
@@ -3729,75 +3673,6 @@ var LWC = (function (exports) {
     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));
-
-    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.`);
-    }
-
-    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.
@@ -3814,6 +3689,9 @@ var LWC = (function (exports) {
   function isVCustomElement(vnode) {
       return vnode.type === 3 /* VNodeType.CustomElement */;
   }
+  function isVScopedSlotFragment(vnode) {
+      return vnode.type === 6 /* VNodeType.ScopedSlotFragment */;
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -4311,7 +4189,9 @@ var LWC = (function (exports) {
       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
@@ -4320,10 +4200,25 @@ var LWC = (function (exports) {
      */
 
     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);
@@ -4331,8 +4226,6 @@ var LWC = (function (exports) {
 
     if (vm) {
       allocateChildren(vnode, vm);
-    } else if (vnode.ctor !== UpgradableConstructor) {
-      throw new TypeError(`Incorrect Component Constructor`);
     }
 
     patchElementPropsAndAttrs$1(null, vnode, renderer);
@@ -4633,7 +4526,7 @@ var LWC = (function (exports) {
     /* RenderMode.Light */
     ) {
       // slow path
-      allocateInSlot(vm, children); // save the allocated children in case this vnode is reused.
+      allocateInSlot(vm, children, vnode.owner); // save the allocated children in case this vnode is reused.
 
       vnode.aChildren = children; // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
 
@@ -4669,13 +4562,19 @@ var LWC = (function (exports) {
     return vm;
   }
 
-  function allocateInSlot(vm, children) {
-    var _a;
+  function allocateInSlot(vm, children, owner) {
+    var _a, _b;
 
     const {
-      cmpSlots: oldSlots
+      cmpSlots: {
+        slotAssignments: oldSlotsMapping
+      }
     } = vm;
-    const cmpSlots = vm.cmpSlots = create(null);
+    const cmpSlotsMapping = create(null);
+    vm.cmpSlots = {
+      owner,
+      slotAssignments: cmpSlotsMapping
+    };
 
     for (let i = 0, len = children.length; i < len; i += 1) {
       const vnode = children[i];
@@ -4687,19 +4586,21 @@ var LWC = (function (exports) {
       let slotName = '';
 
       if (isVBaseElement(vnode)) {
-        slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
+        slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
+      } else if (isVScopedSlotFragment(vnode)) {
+        slotName = vnode.slotName;
       }
 
-      const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || [];
+      const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
       ArrayPush$1.call(vnodes, vnode);
     }
 
     if (isFalse(vm.isDirty)) {
       // We need to determine if the old allocation is really different from the new one
       // and mark the vm as dirty
-      const oldKeys = keys(oldSlots);
+      const oldKeys = keys(oldSlotsMapping);
 
-      if (oldKeys.length !== keys(cmpSlots).length) {
+      if (oldKeys.length !== keys(cmpSlotsMapping).length) {
         markComponentAsDirty(vm);
         return;
       }
@@ -4707,15 +4608,15 @@ var LWC = (function (exports) {
       for (let i = 0, len = oldKeys.length; i < len; i += 1) {
         const key = oldKeys[i];
 
-        if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
+        if (isUndefined$1(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
           markComponentAsDirty(vm);
           return;
         }
 
-        const oldVNodes = oldSlots[key];
-        const vnodes = cmpSlots[key];
+        const oldVNodes = oldSlotsMapping[key];
+        const vnodes = cmpSlotsMapping[key];
 
-        for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
+        for (let j = 0, a = cmpSlotsMapping[key].length; j < a; j += 1) {
           if (oldVNodes[j] !== vnodes[j]) {
             markComponentAsDirty(vm);
             return;
@@ -4915,6 +4816,18 @@ var LWC = (function (exports) {
   function addVNodeToChildLWC(vnode) {
       ArrayPush$1.call(getVMBeingRendered().velements, vnode);
   }
+  // [s]coped [s]lot [f]actory
+  function ssf(slotName, factory) {
+      return {
+          type: 6 /* VNodeType.ScopedSlotFragment */,
+          factory,
+          owner: getVMBeingRendered(),
+          elm: undefined,
+          sel: undefined,
+          key: undefined,
+          slotName,
+      };
+  }
   // [st]atic node
   function st(fragment, key) {
       return {
@@ -4998,9 +4911,31 @@ var LWC = (function (exports) {
           assert.isTrue(isArray$1(children), `h() 3rd argument children must be an array.`);
       }
       if (!isUndefined$1(slotset) &&
-          !isUndefined$1(slotset[slotName]) &&
-          slotset[slotName].length !== 0) {
-          children = slotset[slotName];
+          !isUndefined$1(slotset.slotAssignments) &&
+          !isUndefined$1(slotset.slotAssignments[slotName]) &&
+          slotset.slotAssignments[slotName].length !== 0) {
+          children = slotset.slotAssignments[slotName].reduce((acc, vnode) => {
+              // If the passed slot content is factory, evaluate it and use the produced vnodes
+              if (vnode && isVScopedSlotFragment(vnode)) {
+                  const vmBeingRenderedInception = getVMBeingRendered();
+                  let children = [];
+                  // Evaluate in the scope of the slot content's owner
+                  // if a slotset is provided, there will always be an owner. The only case where owner is
+                  // undefined is for root components, but root components cannot accept slotted content
+                  setVMBeingRendered(slotset.owner);
+                  try {
+                      children = vnode.factory(data.slotData);
+                  }
+                  finally {
+                      setVMBeingRendered(vmBeingRenderedInception);
+                  }
+                  return ArrayConcat$1.call(acc, children);
+              }
+              else {
+                  // If the slot content is a static list of child nodes provided by the parent, nothing to do
+                  return ArrayConcat$1.call(acc, vnode);
+              }
+          }, []);
       }
       const vmBeingRendered = getVMBeingRendered();
       const { renderMode, shadowMode } = vmBeingRendered;
@@ -5320,6 +5255,7 @@ var LWC = (function (exports) {
       gid,
       fid,
       shc,
+      ssf,
   });
 
   /*
@@ -5456,9 +5392,9 @@ var LWC = (function (exports) {
       }
       const { cmpSlots } = vm;
       const { slots = EmptyArray } = html;
-      for (const slotName in cmpSlots) {
+      for (const slotName in cmpSlots.slotAssignments) {
           // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
-          assert.isTrue(isArray$1(cmpSlots[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots[slotName])} for slot "${slotName}" in ${vm}.`);
+          assert.isTrue(isArray$1(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
           if (slotName !== '' && ArrayIndexOf.call(slots, slotName) === -1) {
               // TODO [#1297]: this should never really happen because the compiler should always validate
               // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
@@ -5955,7 +5891,9 @@ var LWC = (function (exports) {
       velements: EmptyArray,
       cmpProps: create(null),
       cmpFields: create(null),
-      cmpSlots: create(null),
+      cmpSlots: {
+        slotAssignments: create(null)
+      },
       oar: create(null),
       cmpTemplate: null,
       hydrated: Boolean(hydrated),
@@ -7106,19 +7044,23 @@ var LWC = (function (exports) {
       //
       // 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;
@@ -7360,7 +7302,7 @@ var LWC = (function (exports) {
       }
       return ctor;
   }
-  /* version: 2.25.1 */
+  /* version: 2.27.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7504,6 +7446,626 @@ var LWC = (function (exports) {
       }
   }
 
+  /*
+   * 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.
@@ -7564,7 +8126,7 @@ var LWC = (function (exports) {
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.25.1 */
+      /** version: 2.27.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -7572,65 +8134,6 @@ var LWC = (function (exports) {
        * 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);
       }
@@ -7804,9 +8307,7 @@ var LWC = (function (exports) {
       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;
@@ -7866,6 +8367,8 @@ var LWC = (function (exports) {
   {
       // 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),
   });
@@ -7966,36 +8469,44 @@ var LWC = (function (exports) {
   //       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;
   }
 
   /*
@@ -8082,8 +8593,13 @@ var LWC = (function (exports) {
       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
@@ -8092,9 +8608,9 @@ var LWC = (function (exports) {
      * 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
       });
@@ -8103,15 +8619,21 @@ var LWC = (function (exports) {
         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;
   }
 
@@ -8183,7 +8705,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.25.1 */
+  /* version: 2.27.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;