lwc 2.25.1 → 2.27.0

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

@@ -43,7 +43,7 @@ var assert = /*#__PURE__*/Object.freeze({
  */
 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) {
@@ -299,9 +299,9 @@ function htmlPropertyToAttribute(propName) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.25.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.
@@ -383,7 +383,7 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
         patch$1(propName);
     }
 }
-/** version: 2.25.1 */
+/** version: 2.27.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -399,7 +399,6 @@ const features = {
     DUMMY_TEST_FLAG: null,
     ENABLE_ELEMENT_PATCH: null,
     ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
-    ENABLE_HMR: null,
     ENABLE_HTML_COLLECTIONS_PATCH: null,
     ENABLE_INNER_OUTER_TEXT_PATCH: null,
     ENABLE_MIXED_SHADOW_MODE: null,
@@ -410,6 +409,7 @@ const features = {
     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) });
@@ -463,7 +463,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.25.1 */
+/** version: 2.27.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -1937,7 +1937,9 @@ const refsCache = new WeakMap();
 const LightningElement = function () {
     // This should be as performant as possible, while any initialization should be done lazily
     if (isNull(vmBeingConstructed)) {
-        throw new ReferenceError('Illegal constructor');
+        // Thrown when doing something like `new LightningElement()` or
+        // `class Foo extends LightningElement {}; new Foo()`
+        throw new TypeError('Illegal constructor');
     }
     const vm = vmBeingConstructed;
     const { def, elm } = vm;
@@ -2986,274 +2988,213 @@ const swappedStyleMap = new WeakMap();
 const activeTemplates = new WeakMap();
 const activeComponents = new WeakMap();
 const activeStyles = new WeakMap();
-
 function rehydrateHotTemplate(tpl) {
-  const list = activeTemplates.get(tpl);
-
-  if (!isUndefined$1(list)) {
-    list.forEach(vm => {
-      if (isFalse(vm.isDirty)) {
-        // forcing the vm to rehydrate in the micro-task:
-        markComponentAsDirty(vm);
-        scheduleRehydration(vm);
-      }
-    }); // resetting the Set to release the memory of those vm references
-    // since they are not longer related to this template, instead
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return true;
+    const list = activeTemplates.get(tpl);
+    if (!isUndefined$1(list)) {
+        list.forEach((vm) => {
+            if (isFalse(vm.isDirty)) {
+                // forcing the vm to rehydrate in the micro-task:
+                markComponentAsDirty(vm);
+                scheduleRehydration(vm);
+            }
+        });
+        // resetting the Set to release the memory of those vm references
+        // since they are not longer related to this template, instead
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return true;
 }
-
 function rehydrateHotStyle(style) {
-  const list = activeStyles.get(style);
-
-  if (!isUndefined$1(list)) {
-    list.forEach(vm => {
-      // if a style definition is swapped, we must reset
-      // vm's template content in the next micro-task:
-      forceRehydration(vm);
-    }); // resetting the Set to release the memory of those vm references
-    // since they are not longer related to this style, instead
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return true;
+    const list = activeStyles.get(style);
+    if (!isUndefined$1(list)) {
+        list.forEach((vm) => {
+            // if a style definition is swapped, we must reset
+            // vm's template content in the next micro-task:
+            forceRehydration(vm);
+        });
+        // resetting the Set to release the memory of those vm references
+        // since they are not longer related to this style, instead
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return true;
 }
-
 function rehydrateHotComponent(Ctor) {
-  const list = activeComponents.get(Ctor);
-  let canRefreshAllInstances = true;
-
-  if (!isUndefined$1(list)) {
-    list.forEach(vm => {
-      const {
-        owner
-      } = vm;
-
-      if (!isNull(owner)) {
-        // if a component class definition is swapped, we must reset
-        // owner's template content in the next micro-task:
-        forceRehydration(owner);
-      } else {
-        // the hot swapping for components only work for instances of components
-        // created from a template, root elements can't be swapped because we
-        // don't have a way to force the creation of the element with the same state
-        // of the current element.
-        // Instead, we can report the problem to the caller so it can take action,
-        // for example: reload the entire page.
-        canRefreshAllInstances = false;
-      }
-    }); // resetting the Set to release the memory of those vm references
-    // since they are not longer related to this constructor, instead
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return canRefreshAllInstances;
+    const list = activeComponents.get(Ctor);
+    let canRefreshAllInstances = true;
+    if (!isUndefined$1(list)) {
+        list.forEach((vm) => {
+            const { owner } = vm;
+            if (!isNull(owner)) {
+                // if a component class definition is swapped, we must reset
+                // owner's template content in the next micro-task:
+                forceRehydration(owner);
+            }
+            else {
+                // the hot swapping for components only work for instances of components
+                // created from a template, root elements can't be swapped because we
+                // don't have a way to force the creation of the element with the same state
+                // of the current element.
+                // Instead, we can report the problem to the caller so it can take action,
+                // for example: reload the entire page.
+                canRefreshAllInstances = false;
+            }
+        });
+        // resetting the Set to release the memory of those vm references
+        // since they are not longer related to this constructor, instead
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return canRefreshAllInstances;
 }
-
 function getTemplateOrSwappedTemplate(tpl) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
-      visited.add(tpl);
-      tpl = swappedTemplateMap.get(tpl);
+        visited.add(tpl);
+        tpl = swappedTemplateMap.get(tpl);
     }
-  }
-
-  return tpl;
+    return tpl;
 }
 function getComponentOrSwappedComponent(Ctor) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
-      visited.add(Ctor);
-      Ctor = swappedComponentMap.get(Ctor);
+        visited.add(Ctor);
+        Ctor = swappedComponentMap.get(Ctor);
     }
-  }
-
-  return Ctor;
+    return Ctor;
 }
 function getStyleOrSwappedStyle(style) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedStyleMap.has(style) && !visited.has(style)) {
-      visited.add(style);
-      style = swappedStyleMap.get(style);
+        visited.add(style);
+        style = swappedStyleMap.get(style);
     }
-  }
-
-  return style;
+    return style;
 }
 function setActiveVM(vm) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     // tracking active component
     const Ctor = vm.def.ctor;
     let componentVMs = activeComponents.get(Ctor);
-
     if (isUndefined$1(componentVMs)) {
-      componentVMs = new Set();
-      activeComponents.set(Ctor, componentVMs);
-    } // this will allow us to keep track of the hot components
-
-
-    componentVMs.add(vm); // tracking active template
-
+        componentVMs = new Set();
+        activeComponents.set(Ctor, componentVMs);
+    }
+    // this will allow us to keep track of the hot components
+    componentVMs.add(vm);
+    // tracking active template
     const tpl = vm.cmpTemplate;
-
     if (tpl) {
-      let templateVMs = activeTemplates.get(tpl);
-
-      if (isUndefined$1(templateVMs)) {
-        templateVMs = new Set();
-        activeTemplates.set(tpl, templateVMs);
-      } // this will allow us to keep track of the templates that are
-      // being used by a hot component
-
-
-      templateVMs.add(vm); // tracking active styles associated to template
-
-      const stylesheets = tpl.stylesheets;
-
-      if (!isUndefined$1(stylesheets)) {
-        flattenStylesheets(stylesheets).forEach(stylesheet => {
-          // this is necessary because we don't hold the list of styles
-          // in the vm, we only hold the selected (already swapped template)
-          // but the styles attached to the template might not be the actual
-          // active ones, but the swapped versions of those.
-          stylesheet = getStyleOrSwappedStyle(stylesheet);
-          let stylesheetVMs = activeStyles.get(stylesheet);
-
-          if (isUndefined$1(stylesheetVMs)) {
-            stylesheetVMs = new Set();
-            activeStyles.set(stylesheet, stylesheetVMs);
-          } // this will allow us to keep track of the stylesheet that are
-          // being used by a hot component
-
-
-          stylesheetVMs.add(vm);
-        });
-      }
+        let templateVMs = activeTemplates.get(tpl);
+        if (isUndefined$1(templateVMs)) {
+            templateVMs = new Set();
+            activeTemplates.set(tpl, templateVMs);
+        }
+        // this will allow us to keep track of the templates that are
+        // being used by a hot component
+        templateVMs.add(vm);
+        // tracking active styles associated to template
+        const stylesheets = tpl.stylesheets;
+        if (!isUndefined$1(stylesheets)) {
+            flattenStylesheets(stylesheets).forEach((stylesheet) => {
+                // this is necessary because we don't hold the list of styles
+                // in the vm, we only hold the selected (already swapped template)
+                // but the styles attached to the template might not be the actual
+                // active ones, but the swapped versions of those.
+                stylesheet = getStyleOrSwappedStyle(stylesheet);
+                let stylesheetVMs = activeStyles.get(stylesheet);
+                if (isUndefined$1(stylesheetVMs)) {
+                    stylesheetVMs = new Set();
+                    activeStyles.set(stylesheet, stylesheetVMs);
+                }
+                // this will allow us to keep track of the stylesheet that are
+                // being used by a hot component
+                stylesheetVMs.add(vm);
+            });
+        }
     }
-  }
 }
 function removeActiveVM(vm) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     // tracking inactive component
     const Ctor = vm.def.ctor;
     let list = activeComponents.get(Ctor);
-
     if (!isUndefined$1(list)) {
-      // deleting the vm from the set to avoid leaking memory
-      list.delete(vm);
-    } // removing inactive template
-
-
-    const tpl = vm.cmpTemplate;
-
-    if (tpl) {
-      list = activeTemplates.get(tpl);
-
-      if (!isUndefined$1(list)) {
         // deleting the vm from the set to avoid leaking memory
         list.delete(vm);
-      } // removing active styles associated to template
-
-
-      const styles = tpl.stylesheets;
-
-      if (!isUndefined$1(styles)) {
-        flattenStylesheets(styles).forEach(style => {
-          list = activeStyles.get(style);
-
-          if (!isUndefined$1(list)) {
+    }
+    // removing inactive template
+    const tpl = vm.cmpTemplate;
+    if (tpl) {
+        list = activeTemplates.get(tpl);
+        if (!isUndefined$1(list)) {
             // deleting the vm from the set to avoid leaking memory
             list.delete(vm);
-          }
-        });
-      }
+        }
+        // removing active styles associated to template
+        const styles = tpl.stylesheets;
+        if (!isUndefined$1(styles)) {
+            flattenStylesheets(styles).forEach((style) => {
+                list = activeStyles.get(style);
+                if (!isUndefined$1(list)) {
+                    // deleting the vm from the set to avoid leaking memory
+                    list.delete(vm);
+                }
+            });
+        }
     }
-  }
 }
 function swapTemplate(oldTpl, newTpl) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (isTemplateRegistered(oldTpl) && isTemplateRegistered(newTpl)) {
-      swappedTemplateMap.set(oldTpl, newTpl);
-      return rehydrateHotTemplate(oldTpl);
-    } else {
-      throw new TypeError(`Invalid Template`);
+    if (process.env.NODE_ENV !== 'production') {
+        if (isTemplateRegistered(oldTpl) && isTemplateRegistered(newTpl)) {
+            swappedTemplateMap.set(oldTpl, newTpl);
+            return rehydrateHotTemplate(oldTpl);
+        }
+        else {
+            throw new TypeError(`Invalid Template`);
+        }
     }
-  }
-
-  if (!lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    return false;
 }
 function swapComponent(oldComponent, newComponent) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (isComponentConstructor(oldComponent) && isComponentConstructor(newComponent)) {
-      swappedComponentMap.set(oldComponent, newComponent);
-      return rehydrateHotComponent(oldComponent);
-    } else {
-      throw new TypeError(`Invalid Component`);
+    if (process.env.NODE_ENV !== 'production') {
+        if (isComponentConstructor(oldComponent) && isComponentConstructor(newComponent)) {
+            swappedComponentMap.set(oldComponent, newComponent);
+            return rehydrateHotComponent(oldComponent);
+        }
+        else {
+            throw new TypeError(`Invalid Component`);
+        }
     }
-  }
-
-  if (!lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    return false;
 }
 function swapStyle(oldStyle, newStyle) {
-  if (process.env.NODE_ENV !== 'production') {
-    // TODO [#1887]: once the support for registering styles is implemented
-    // we can add the validation of both styles around this block.
-    swappedStyleMap.set(oldStyle, newStyle);
-    return rehydrateHotStyle(oldStyle);
-  }
-
-  if (!lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    if (process.env.NODE_ENV !== 'production') {
+        // TODO [#1887]: once the support for registering styles is implemented
+        // we can add the validation of both styles around this block.
+        swappedStyleMap.set(oldStyle, newStyle);
+        return rehydrateHotStyle(oldStyle);
+    }
+    return false;
 }
 
 /*
@@ -3664,15 +3605,18 @@ function getScopeTokenClass(owner) {
 /**
  * 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) {
@@ -3726,75 +3670,6 @@ function createStylesheet(vm, stylesheets) {
   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.
@@ -3811,6 +3686,9 @@ function isSameVnode(vnode1, vnode2) {
 function isVCustomElement(vnode) {
     return vnode.type === 3 /* VNodeType.CustomElement */;
 }
+function isVScopedSlotFragment(vnode) {
+    return vnode.type === 6 /* VNodeType.ScopedSlotFragment */;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4308,7 +4186,9 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     sel,
     owner
   } = vnode;
-  const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+  const {
+    createCustomElement
+  } = renderer;
   /**
    * Note: if the upgradable constructor does not expect, or throw when we new it
    * with a callback as the first argument, we could implement a more advanced
@@ -4317,10 +4197,25 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
    */
 
   let vm;
-  const elm = new UpgradableConstructor(elm => {
+
+  const upgradeCallback = elm => {
     // the custom element from the registry is expecting an upgrade callback
     vm = createViewModelHook(elm, vnode, renderer);
-  });
+  };
+
+  const connectedCallback = elm => {
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      connectRootElement(elm);
+    }
+  };
+
+  const disconnectedCallback = elm => {
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      disconnectRootElement(elm);
+    }
+  };
+
+  const elm = createCustomElement(sel, upgradeCallback, connectedCallback, disconnectedCallback);
   vnode.elm = elm;
   vnode.vm = vm;
   linkNodeToShadow(elm, owner, renderer);
@@ -4328,8 +4223,6 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
 
   if (vm) {
     allocateChildren(vnode, vm);
-  } else if (vnode.ctor !== UpgradableConstructor) {
-    throw new TypeError(`Incorrect Component Constructor`);
   }
 
   patchElementPropsAndAttrs$1(null, vnode, renderer);
@@ -4630,7 +4523,7 @@ function allocateChildren(vnode, vm) {
   /* 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!
 
@@ -4666,13 +4559,19 @@ function createViewModelHook(elm, vnode, renderer) {
   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];
@@ -4684,19 +4583,21 @@ function allocateInSlot(vm, children) {
     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;
     }
@@ -4704,15 +4605,15 @@ function allocateInSlot(vm, children) {
     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;
@@ -4912,6 +4813,18 @@ const SymbolIterator = Symbol.iterator;
 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 {
@@ -4995,9 +4908,31 @@ function s(slotName, data, children, slotset) {
         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;
@@ -5317,6 +5252,7 @@ const api = freeze({
     gid,
     fid,
     shc,
+    ssf,
 });
 
 /*
@@ -5453,9 +5389,9 @@ function validateSlots(vm, html) {
     }
     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
@@ -5952,7 +5888,9 @@ function createVM(elm, ctor, renderer, options) {
     velements: EmptyArray,
     cmpProps: create(null),
     cmpFields: create(null),
-    cmpSlots: create(null),
+    cmpSlots: {
+      slotAssignments: create(null)
+    },
     oar: create(null),
     cmpTemplate: null,
     hydrated: Boolean(hydrated),
@@ -7103,19 +7041,23 @@ function validateClassAttr(vnode, elm, renderer) {
     //
     // Consequently, hydration mismatches will occur if scoped CSS token classnames
     // are rendered during SSR. This needs to be accounted for when validating.
-    if (scopedToken) {
+    if (!isNull(scopedToken) || !isNull(stylesheetTokenHost)) {
         if (!isUndefined$1(className)) {
-            className = isNull(stylesheetTokenHost)
-                ? `${scopedToken} ${className}`
-                : `${scopedToken} ${className} ${stylesheetTokenHost}`;
+            // The order of the className should be scopedToken className stylesheetTokenHost
+            const classTokens = [scopedToken, className, stylesheetTokenHost];
+            const classNames = ArrayFilter.call(classTokens, (token) => !isNull(token));
+            className = ArrayJoin.call(classNames, ' ');
         }
         else if (!isUndefined$1(classMap)) {
-            classMap = Object.assign(Object.assign(Object.assign({}, classMap), { [scopedToken]: true }), (isNull(stylesheetTokenHost) ? {} : { [stylesheetTokenHost]: true }));
+            classMap = Object.assign(Object.assign(Object.assign({}, classMap), (!isNull(scopedToken) ? { [scopedToken]: true } : {})), (!isNull(stylesheetTokenHost) ? { [stylesheetTokenHost]: true } : {}));
         }
         else {
-            className = isNull(stylesheetTokenHost)
-                ? `${scopedToken}`
-                : `${scopedToken} ${stylesheetTokenHost}`;
+            // The order of the className should be scopedToken stylesheetTokenHost
+            const classTokens = [scopedToken, stylesheetTokenHost];
+            const classNames = ArrayFilter.call(classTokens, (token) => !isNull(token));
+            if (classNames.length) {
+                className = ArrayJoin.call(classNames, ' ');
+            }
         }
     }
     let nodesAreCompatible = true;
@@ -7357,7 +7299,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.25.1 */
+/* version: 2.27.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7501,6 +7443,626 @@ function insertStylesheet(content, target) {
     }
 }
 
+/*
+ * Copyright (c) 2020, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+function isCustomElementRegistryAvailable() {
+    if (typeof customElements === 'undefined') {
+        return false;
+    }
+    try {
+        // dereference HTMLElement global because babel wraps globals in compat mode with a
+        // _wrapNativeSuper()
+        // This is a problem because LWCUpgradableElement extends renderer.HTMLElement which does not
+        // get wrapped by babel.
+        const HTMLElementAlias = HTMLElement;
+        // In case we use compat mode with a modern browser, the compat mode transformation
+        // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
+        // which are not equipped to be initialized that way.
+        class clazz extends HTMLElementAlias {
+        }
+        customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
+        new clazz();
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+const hasCustomElements = isCustomElementRegistryAvailable();
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+// Creates a custom element for compat (legacy) browser environments
+const createCustomElementCompat = (tagName, upgradeCallback) => {
+    const elm = document.createElement(tagName);
+    upgradeCallback(elm); // nothing to do with the result for now
+    return elm;
+};
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const cachedConstructors = new Map();
+const elementsUpgradedOutsideLWC = new WeakSet();
+let elementBeingUpgradedByLWC = false;
+// Creates a constructor that is intended to be used as a vanilla custom element, except that the upgradeCallback is
+// passed in to the constructor so LWC can reuse the same custom element constructor for multiple components.
+// Another benefit is that only LWC can create components that actually do anything – if you do
+// `customElements.define('x-foo')`, then you don't have access to the upgradeCallback, so it's a dummy custom element.
+// This class should be created once per tag name.
+const createUpgradableConstructor = (connectedCallback, disconnectedCallback) => {
+    // TODO [#2972]: this class should expose observedAttributes as necessary
+    return class UpgradableConstructor extends HTMLElement {
+        constructor(upgradeCallback) {
+            super();
+            // If the element is not created using lwc.createElement(), e.g. `document.createElement('x-foo')`,
+            // then elementBeingUpgraded will be false
+            if (elementBeingUpgradedByLWC) {
+                upgradeCallback(this);
+            }
+            else {
+                // keep track of elements that were not created by lwc.createElement,
+                // so we can ignore their lifecycle hooks
+                elementsUpgradedOutsideLWC.add(this);
+                // TODO [#2970]: LWC elements cannot be upgraded via new Ctor()
+                // Do we want to support this? Throw an error? Currently for backwards compat it's a no-op.
+            }
+        }
+        connectedCallback() {
+            if (!elementsUpgradedOutsideLWC.has(this)) {
+                connectedCallback(this);
+            }
+        }
+        disconnectedCallback() {
+            if (!elementsUpgradedOutsideLWC.has(this)) {
+                disconnectedCallback(this);
+            }
+        }
+    };
+};
+const createCustomElementVanilla = (tagName, upgradeCallback, connectedCallback, disconnectedCallback) => {
+    // use global custom elements registry
+    let UpgradableConstructor = cachedConstructors.get(tagName);
+    if (isUndefined$1(UpgradableConstructor)) {
+        if (!isUndefined$1(customElements.get(tagName))) {
+            throw new Error(`Unexpected tag name "${tagName}". This name is a registered custom element, preventing LWC to upgrade the element.`);
+        }
+        UpgradableConstructor = createUpgradableConstructor(connectedCallback, disconnectedCallback);
+        customElements.define(tagName, UpgradableConstructor);
+        cachedConstructors.set(tagName, UpgradableConstructor);
+    }
+    elementBeingUpgradedByLWC = true;
+    try {
+        return new UpgradableConstructor(upgradeCallback);
+    }
+    finally {
+        elementBeingUpgradedByLWC = false;
+    }
+};
+
+/*
+ * Copyright (c) 2020, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+/**
+ * Create a scoped registry, i.e. a function that can create custom elements whose tag names
+ * do not conflict with vanilla custom elements having the same tag name.
+ */
+function createScopedRegistry() {
+    if (!hasCustomElements) {
+        // This code should never be reached, because we don't use the pivot registry if
+        // custom elements are unavailable.
+        throw new Error('Custom elements are not supported in this environment.');
+    }
+    const { HTMLElement: NativeHTMLElement } = window;
+    const { hasAttribute: nativeHasAttribute, setAttribute: nativeSetAttribute, removeAttribute: nativeRemoveAttribute, getAttribute: nativeGetAttribute, } = NativeHTMLElement.prototype;
+    const definitionForElement = new WeakMap();
+    const pendingRegistryForElement = new WeakMap();
+    const definitionForConstructor = new WeakMap();
+    const registeredUserCtors = new WeakSet();
+    const pivotCtorByTag = new Map();
+    const globalDefinitionsByTag = new Map();
+    const globalDefinitionsByClass = new Map();
+    const awaitingUpgrade = new Map();
+    const EMPTY_SET = new Set();
+    function createDefinitionRecord(constructor) {
+        var _a;
+        const { connectedCallback, disconnectedCallback, adoptedCallback, attributeChangedCallback, } = constructor.prototype;
+        const observedAttributes = new Set((_a = constructor.observedAttributes) !== null && _a !== void 0 ? _a : []);
+        return {
+            UserCtor: constructor,
+            PivotCtor: undefined,
+            connectedCallback,
+            disconnectedCallback,
+            adoptedCallback,
+            attributeChangedCallback,
+            observedAttributes,
+        };
+    }
+    // Helper to create stand-in element for each tagName registered that delegates out to the registry for the given
+    // element. Note that the `registeredDefinition` represents the constructor that was used to register during
+    // `customElements.define()`. Whereas the `pivotDefinition` represents the constructor that is passed when the pivot
+    // constructor is invoked with another constructor.
+    function createPivotingClass(tagName, registeredDefinition) {
+        class PivotCtor extends NativeHTMLElement {
+            constructor(UserCtor) {
+                // This constructor can only be invoked by:
+                // a) the browser instantiating  an element from parsing or via document.createElement.
+                // b) LWC new PivotClass (This constructor is NOT observable/accessible in user-land).
+                // b) new UserClass.
+                // When LWC instantiates it, it will pass the upgrading definition as an argument
+                // If the caller signals via UserCtor that this is in fact a controlled
+                // definition, we use that one, otherwise fallback to the global
+                // internal registry.
+                super();
+                const userCtorIsDefined = !isUndefined$1(UserCtor);
+                if (userCtorIsDefined) {
+                    if (!isConstructor(UserCtor)) {
+                        throw new TypeError(`Failed to create custom element: the provided constructor is not a constructor.`);
+                    }
+                    if (!registeredUserCtors.has(UserCtor)) {
+                        throw new Error(`Failed to create custom element: the provided constructor is unregistered: ${UserCtor.name}.`);
+                    }
+                }
+                const definition = userCtorIsDefined
+                    ? getOrCreateDefinitionForConstructor(UserCtor)
+                    : globalDefinitionsByTag.get(tagName);
+                if (!isUndefined$1(definition)) {
+                    internalUpgrade(this, registeredDefinition, definition);
+                }
+                else {
+                    // This is the case in which there is no global definition, and
+                    // it is not handled by LWC (otherwise it will have a valid UserCtor)
+                    // so we need to add it to the pending queue just in case it eventually
+                    // gets defined in the global registry.
+                    pendingRegistryForElement.set(this, registeredDefinition);
+                }
+            }
+            connectedCallback() {
+                var _a;
+                const definition = definitionForElement.get(this);
+                if (!isUndefined$1(definition)) {
+                    // Delegate out to user callback
+                    (_a = definition.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+                }
+                else {
+                    // Register for upgrade when defined (only when connected, so we don't leak)
+                    let awaiting = awaitingUpgrade.get(tagName);
+                    if (isUndefined$1(awaiting)) {
+                        awaitingUpgrade.set(tagName, (awaiting = new Set()));
+                    }
+                    awaiting.add(this);
+                }
+            }
+            disconnectedCallback() {
+                var _a;
+                const definition = definitionForElement.get(this);
+                if (!isUndefined$1(definition)) {
+                    // Delegate out to user callback
+                    (_a = definition.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+                }
+                else {
+                    // Un-register for upgrade when defined (so we don't leak)
+                    const awaiting = awaitingUpgrade.get(tagName);
+                    // At this point, awaiting should never be undefined, because connectedCallback
+                    // must have been called before disconnectedCallback. But just to be safe, we check
+                    if (!isUndefined$1(awaiting)) {
+                        awaiting.delete(this);
+                    }
+                }
+            }
+            adoptedCallback() {
+                var _a;
+                const definition = definitionForElement.get(this);
+                (_a = definition === null || definition === void 0 ? void 0 : definition.adoptedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+            attributeChangedCallback(name, oldValue, newValue) {
+                var _a;
+                const definition = definitionForElement.get(this);
+                // if both definitions are the same, then the observedAttributes is the same,
+                // but if they are different, only if the runtime definition has the attribute
+                // marked as observed, then it should invoke attributeChangedCallback.
+                if (registeredDefinition === definition ||
+                    (definition === null || definition === void 0 ? void 0 : definition.observedAttributes.has(name))) {
+                    (_a = definition.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.apply(this, [name, oldValue, newValue]);
+                }
+            }
+        }
+        PivotCtor.observedAttributes = [...registeredDefinition.observedAttributes];
+        return PivotCtor;
+    }
+    function getNewObservedAttributes(registeredDefinition, pivotDefinition) {
+        const { observedAttributes, attributeChangedCallback } = pivotDefinition;
+        if (observedAttributes.size === 0 || isUndefined$1(attributeChangedCallback)) {
+            // This instance does not need to observe any attributes, no need to patch
+            return EMPTY_SET;
+        }
+        // Natively, the attributes observed by the registered definition are going to be taken
+        // care of by the browser, only the difference between the two sets has to be taken
+        // care by the patched version.
+        return new Set([...pivotDefinition.observedAttributes].filter((x) => !registeredDefinition.observedAttributes.has(x)));
+    }
+    function throwAsyncError(error) {
+        // Per native custom element behavior, errors thrown in attributeChangedCallback
+        // become unhandled async errors. We use setTimeout() instead of Promise.resolve()
+        // to make it an unhandled error rather than an unhandled rejection.
+        setTimeout(() => {
+            throw error;
+        });
+    }
+    // Helper to patch `setAttribute`/`getAttribute` to implement `attributeChangedCallback`.
+    // Why is this necessary? Well basically, you can't change the `observedAttributes` after
+    // a custom element is defined. So with pivots, if two classes share the same tag name,
+    // and the second class observes attributes that aren't observed by the first one,
+    // then those attributes can never be observed by the native `observedAttributes` system.
+    // So we have to simulate it by patching `getAttribute`/`removeAttribute`. Note that
+    // we only do this when absolutely necessary, though; i.e. because we've determined
+    // that we aren't observing the attributes we need to.
+    function patchAttributes(instance, registeredDefinition, pivotDefinition) {
+        const newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
+        if (newObservedAttributes.size === 0) {
+            return;
+        }
+        const { attributeChangedCallback } = pivotDefinition;
+        // Patch the instance.
+        // Note we use the native `getAttribute` rather than the super's `getAttribute` because
+        // we don't actually want it to be observable that we're calling `getAttribute` from
+        // `setAttribute` and `removeAttribute`.
+        // TODO [#2994]: this should handle reflected properties such as `ariaLabel` and `role`.
+        defineProperties(instance, {
+            setAttribute: {
+                value: function setAttribute(name, value) {
+                    if (newObservedAttributes.has(name)) {
+                        const old = nativeGetAttribute.call(this, name);
+                        nativeSetAttribute.call(this, name, value);
+                        try {
+                            attributeChangedCallback.call(this, name, old, value + '');
+                        }
+                        catch (error) {
+                            throwAsyncError(error);
+                        }
+                    }
+                    else {
+                        nativeSetAttribute.call(this, name, value);
+                    }
+                },
+                writable: true,
+                enumerable: true,
+                configurable: true,
+            },
+            removeAttribute: {
+                value: function removeAttribute(name) {
+                    if (newObservedAttributes.has(name)) {
+                        const old = nativeGetAttribute.call(this, name);
+                        nativeRemoveAttribute.call(this, name);
+                        try {
+                            attributeChangedCallback.call(this, name, old, null);
+                        }
+                        catch (error) {
+                            throwAsyncError(error);
+                        }
+                    }
+                    else {
+                        nativeRemoveAttribute.call(this, name);
+                    }
+                },
+                writable: true,
+                enumerable: true,
+                configurable: true,
+            },
+        });
+    }
+    function patchAttributesDuringUpgrade(instance, registeredDefinition, pivotDefinition) {
+        // The below case patches observed attributes for the case where the HTML element is upgraded
+        // from a pre-existing one in the DOM.
+        const newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
+        if (getNewObservedAttributes(registeredDefinition, pivotDefinition).size === 0) {
+            return;
+        }
+        const { attributeChangedCallback } = pivotDefinition;
+        // Approximate observedAttributes from the user class, but only for the new observed attributes
+        newObservedAttributes.forEach((name) => {
+            if (nativeHasAttribute.call(instance, name)) {
+                const newValue = nativeGetAttribute.call(instance, name);
+                attributeChangedCallback.call(instance, name, null, newValue);
+            }
+        });
+    }
+    // User extends this HTMLElement, which returns the CE being upgraded
+    let upgradingInstance;
+    // Helper to upgrade an instance with a CE definition using "constructor call trick"
+    function internalUpgrade(instance, registeredDefinition, pivotDefinition) {
+        setPrototypeOf(instance, pivotDefinition.UserCtor.prototype);
+        definitionForElement.set(instance, pivotDefinition);
+        // attributes patches when needed
+        if (pivotDefinition !== registeredDefinition) {
+            patchAttributes(instance, registeredDefinition, pivotDefinition);
+        }
+        // Tricking the construction path to believe that a new instance is being created,
+        // that way it will execute the super initialization mechanism but the HTMLElement
+        // constructor will reuse the instance by returning the upgradingInstance.
+        // This is by far the most important piece of the puzzle
+        upgradingInstance = instance;
+        // By `new`ing the UserCtor, we now jump to the constructor for the overridden global HTMLElement
+        // The reason this happens is that the UserCtor extends HTMLElement, so it calls the `super()`.
+        // Note that `upgradingInstance` is explicitly handled in the HTMLElement constructor.
+        new pivotDefinition.UserCtor();
+        patchAttributesDuringUpgrade(instance, registeredDefinition, pivotDefinition);
+    }
+    function isConstructor(constructor) {
+        return isFunction$1(constructor) && isObject(constructor.prototype);
+    }
+    function getOrCreateDefinitionForConstructor(constructor) {
+        if (!isConstructor(constructor)) {
+            throw new TypeError('The referenced constructor is not a constructor.');
+        }
+        const definition = definitionForConstructor.get(constructor);
+        if (!isUndefined$1(definition)) {
+            return definition;
+        }
+        return createDefinitionRecord(constructor);
+    }
+    const { customElements: nativeRegistry } = window;
+    const { define: nativeDefine, whenDefined: nativeWhenDefined, get: nativeGet } = nativeRegistry;
+    // patch for the global registry define mechanism
+    CustomElementRegistry.prototype.define = function define(tagName, constructor, options) {
+        if (options && options.extends) {
+            // TODO [#2983]: should we support `extends`?
+            throw new DOMException('NotSupportedError: "extends" key in customElements.define() options is not supported.');
+        }
+        if (globalDefinitionsByTag.has(tagName)) {
+            throw new DOMException(`Failed to execute 'define' on 'CustomElementRegistry': the name "${tagName}" has already been used with this registry`);
+        }
+        if (!isUndefined$1(globalDefinitionsByClass.get(constructor))) {
+            throw new DOMException(`Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry`);
+        }
+        const definition = getOrCreateDefinitionForConstructor(constructor);
+        registeredUserCtors.add(constructor);
+        let PivotCtor = pivotCtorByTag.get(tagName);
+        if (isUndefined$1(PivotCtor)) {
+            PivotCtor = createPivotingClass(tagName, definition);
+            // Register a pivoting class which will handle global registry initializations
+            nativeDefine.call(nativeRegistry, tagName, PivotCtor);
+        }
+        // Only cache after nativeDefine has been called, because if it throws an error
+        // (e.g. for an invalid tag name), then we don't want to cache anything.
+        definitionForConstructor.set(constructor, definition);
+        pivotCtorByTag.set(tagName, PivotCtor);
+        globalDefinitionsByTag.set(tagName, definition);
+        globalDefinitionsByClass.set(constructor, definition);
+        // For globally defined custom elements, the definition associated
+        // to the UserCtor has a back-pointer to PivotCtor in case the user
+        // new the UserCtor, so we know how to create the underlying element.
+        definition.PivotCtor = PivotCtor;
+        // Upgrade any elements created in this scope before customElements.define
+        // was called, which should be exhibited by the following steps:
+        // 1) LWC registers a tagName for an LWC component.
+        // 2) Element with same tagName is created with document.createElement()
+        //    and inserted into DOM.
+        // 3) customElements.define() is called with tagName and non-LWC constructor.
+        // This requires immediate upgrade when the new global tagName is defined.
+        const awaiting = awaitingUpgrade.get(tagName);
+        if (!isUndefined$1(awaiting)) {
+            awaitingUpgrade.delete(tagName);
+            for (const element of awaiting) {
+                const registeredDefinition = pendingRegistryForElement.get(element);
+                // At this point, registeredDefinition should never be undefined because awaitingUpgrade
+                // is only populated when we haven't run internalUpgrade yet, and we only populate
+                // pendingRegistryForElement when internalUpgrade hasn't run yet.
+                // But just to be safe, we check.
+                if (!isUndefined$1(registeredDefinition)) {
+                    pendingRegistryForElement.delete(element);
+                    internalUpgrade(element, registeredDefinition, definition);
+                }
+            }
+        }
+    };
+    CustomElementRegistry.prototype.get = function get(tagName) {
+        const NativeCtor = nativeGet.call(nativeRegistry, tagName);
+        if (!isUndefined$1(NativeCtor)) {
+            const definition = globalDefinitionsByTag.get(tagName);
+            if (!isUndefined$1(definition)) {
+                return definition.UserCtor; // defined by the patched custom elements registry
+            }
+            // TODO [#3073]: return undefined rather than the pivot constructor (NativeCtor)
+            return NativeCtor; // return the pivot constructor or constructor that existed before patching
+        }
+    };
+    CustomElementRegistry.prototype.whenDefined = function whenDefined(tagName) {
+        return nativeWhenDefined.call(nativeRegistry, tagName).then((NativeCtor) => {
+            const definition = globalDefinitionsByTag.get(tagName);
+            if (!isUndefined$1(definition)) {
+                return definition.UserCtor;
+            }
+            // TODO [#3073]: return undefined rather than the pivot constructor (NativeCtor)
+            // In this case, the custom element must have been defined before the registry patches
+            // were applied. So return the non-pivot constructor
+            if (isUndefined$1(NativeCtor)) {
+                // Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1335247
+                // We can patch the correct behavior using customElements.get()
+                return nativeGet.call(nativeRegistry, tagName);
+            }
+            return NativeCtor;
+        });
+    };
+    // This constructor is invoked when we call `new pivotDefinition.UserCtor()`
+    // @ts-ignore
+    window.HTMLElement = function HTMLElement() {
+        // Upgrading case: the pivoting class constructor was run by the browser's
+        // native custom elements and we're in the process of running the
+        // "constructor-call trick" on the natively constructed instance, so just
+        // return that here.
+        // This code path is also called when LWC `new`s a PivotCtor.
+        const instance = upgradingInstance;
+        if (!isUndefined$1(instance)) {
+            upgradingInstance = undefined;
+            return instance;
+        }
+        // Construction case: we need to construct the pivoting instance and return it.
+        // This is possible when the user register it via global registry and instantiate
+        // it via `new Ctor()`.
+        const { constructor } = this;
+        const definition = globalDefinitionsByClass.get(constructor);
+        if (isUndefined$1(definition) || isUndefined$1(definition.PivotCtor)) {
+            // This code path is hit if someone `new`s a class that extends `HTMLElement` without
+            // doing `customElements.define()` first. This matches native browser behavior:
+            // https://stackoverflow.com/a/61883392
+            throw new TypeError('Illegal constructor');
+        }
+        // This constructor is ONLY invoked when it is the user instantiating
+        // an element via new Ctor while Ctor is a registered global constructor.
+        const { PivotCtor, UserCtor } = definition;
+        return new PivotCtor(UserCtor);
+    };
+    HTMLElement.prototype = NativeHTMLElement.prototype;
+    /**
+     * Create a new PivotConstructor for the given tagName, which is capable of being constructed
+     * with a UserConstructor defining the behavior. Passing in the UserConstructor here
+     * is a hint that can be used when registering a custom element with the global custom elements
+     * registry for the first time, which provides certain optimizations. It also marks the UserConstructor
+     * as "safe" to be used when passed in to a PivotConstructor.
+     *
+     * @param tagName - element tag name
+     * @param UserCtor - userland custom element constructor
+     * @returns a new custom element constructor
+     */
+    return function createPivotConstructor(tagName, UserCtor) {
+        tagName = StringToLowerCase.call(tagName);
+        let PivotCtor = pivotCtorByTag.get(tagName);
+        if (isUndefined$1(PivotCtor)) {
+            const definition = getOrCreateDefinitionForConstructor(UserCtor);
+            PivotCtor = createPivotingClass(tagName, definition);
+            // Register a pivoting class as a global custom element
+            nativeDefine.call(nativeRegistry, tagName, PivotCtor);
+            definition.PivotCtor = PivotCtor;
+            // Only cache after nativeDefine has been called, because if it throws an error
+            // (e.g. for an invalid tag name), then we don't want to cache anything.
+            definitionForConstructor.set(UserCtor, definition);
+            pivotCtorByTag.set(tagName, PivotCtor);
+        }
+        // Register a UserConstructor as "safe" to be used within a PivotConstructor
+        registeredUserCtors.add(UserCtor);
+        return PivotCtor;
+    };
+}
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+let createScopedConstructor;
+let CachedHTMLElement; // We only call `createScopedRegistry()` if the browser supports custom elements and
+// ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is enabled, because we don't want to patch eagerly if the flag is disabled
+// or we're in a legacy browser.
+
+if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
+  if (hasCustomElements) {
+    // If ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is true, then we eagerly initialize the scoped registry.
+    // It's assumed that ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is set *before* LWC loads, and never changes.
+    //
+    // Why not lazily patch in `createCustomElement`? Well, this could lead to subtle bugs, e.g.:
+    //
+    // 1. LWC loads
+    // 2. `const Ctor = class extends HTMLElement {}`
+    // 3. `lwc.createElement(...)` // here we lazily patch
+    // 4. `customElements.define('x-foo', Ctor)` // throws error because class is bound to stale HTMLElement
+    //
+    // To reduce the risk of this, it's safer to patch the registry eagerly.
+    createScopedConstructor = createScopedRegistry(); // It's important to cache window.HTMLElement here. Otherwise, someone else could overwrite window.HTMLElement (e.g.
+    // another copy of the engine, or another scoping implementation) and we would get "Illegal constructor" errors
+    // because the HTMLElement prototypes are mixed up.
+    //
+    // The reason this happens is that the scoping implementation overwrites window.HTMLElement and expects to work
+    // with that version of HTMLElement. So if you load two copies of the scoping implementation in the same environment,
+    // the second one may accidentally grab window.HTMLElement from the first (when doing `class extends HTMLElement`).
+    // Caching avoids this problem.
+
+    CachedHTMLElement = window.HTMLElement;
+  }
+} // Creates a constructor that is intended to be used as the UserConstructor in a scoped (pivots) registry.
+// In this case, the upgradeCallback only needs to be defined once because we create these on-demand,
+// multiple times per tag name.
+
+
+const createUserConstructor = (upgradeCallback, connectedCallback, disconnectedCallback, HTMLElementToExtend) => {
+  // TODO [#2972]: this class should expose observedAttributes as necessary
+  return class UserConstructor extends HTMLElementToExtend {
+    constructor() {
+      super();
+      upgradeCallback(this);
+    }
+
+    connectedCallback() {
+      connectedCallback(this);
+    }
+
+    disconnectedCallback() {
+      disconnectedCallback(this);
+    }
+
+  };
+};
+
+function createCustomElementScoped(tagName, upgradeCallback, connectedCallback, disconnectedCallback) {
+  if (isUndefined$1(createScopedConstructor) || isUndefined$1(CachedHTMLElement)) {
+    // This error should be impossible to hit
+    throw new Error('The flag ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY must be set to true to use this feature');
+  }
+
+  const UserConstructor = createUserConstructor(upgradeCallback, connectedCallback, disconnectedCallback, CachedHTMLElement);
+  const ScopedConstructor = createScopedConstructor(tagName, UserConstructor);
+  return new ScopedConstructor(UserConstructor);
+}
+
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+/**
+ * We have three modes for creating custom elements:
+ *
+ * 1. Compat (legacy) browser support (e.g. IE11). Totally custom, doesn't rely on native browser APIs.
+ * 2. "Vanilla" custom elements registry. This system actually still allows us to have two LWC components with the
+ *    same tag name, via a simple trick: every custom element constructor we define in the registry is basically
+ *    the same. It's essentially a dummy `class extends HTMLElement` that accepts an `upgradeCallback` in its
+ *    constructor, which allows us to have completely customized functionality for different components.
+ * 3. "Scoped" (or "pivot") custom elements. This relies on a sophisticated system that emulates the "scoped custom
+ *    elements registry" proposal, with support for avoiding conflicts in tag names both between LWC components and
+ *    between LWC components and third-party elements. This uses a similar trick to #2, but is much more complex
+ *    because it must patch the global `customElements` and `HTMLElement` objects.
+ */
+
+let createCustomElement;
+
+if (hasCustomElements) {
+  if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
+    createCustomElement = createCustomElementScoped;
+  } else {
+    // use global custom elements registry (vanilla)
+    createCustomElement = createCustomElementVanilla;
+  }
+} else {
+  // no registry available here
+  createCustomElement = createCustomElementCompat;
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -7561,7 +8123,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.25.1 */
+    /** version: 2.27.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -7569,65 +8131,6 @@ function rendererFactory(baseRenderer) {
      * SPDX-License-Identifier: MIT
      * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
      */
-    exports.getCustomElement = void 0;
-    exports.defineCustomElement = void 0;
-    let HTMLElementConstructor;
-    function isCustomElementRegistryAvailable() {
-        if (typeof customElements === 'undefined') {
-            return false;
-        }
-        try {
-            // dereference HTMLElement global because babel wraps globals in compat mode with a
-            // _wrapNativeSuper()
-            // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
-            // get wrapped by babel.
-            const HTMLElementAlias = HTMLElement;
-            // In case we use compat mode with a modern browser, the compat mode transformation
-            // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
-            // which are not equipped to be initialized that way.
-            class clazz extends HTMLElementAlias {
-            }
-            customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
-            new clazz();
-            return true;
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    if (isCustomElementRegistryAvailable()) {
-        exports.getCustomElement = customElements.get.bind(customElements);
-        exports.defineCustomElement = customElements.define.bind(customElements);
-        HTMLElementConstructor = HTMLElement;
-    }
-    else {
-        const registry = Object.create(null);
-        const reverseRegistry = new WeakMap();
-        exports.defineCustomElement = function define(name, ctor) {
-            if (name !== String.prototype.toLowerCase.call(name) || registry[name]) {
-                throw new TypeError(`Invalid Registration`);
-            }
-            registry[name] = ctor;
-            reverseRegistry.set(ctor, name);
-        };
-        exports.getCustomElement = function get(name) {
-            return registry[name];
-        };
-        HTMLElementConstructor = function HTMLElement() {
-            if (!(this instanceof HTMLElement)) {
-                throw new TypeError(`Invalid Invocation`);
-            }
-            const { constructor } = this;
-            const name = reverseRegistry.get(constructor);
-            if (!name) {
-                throw new TypeError(`Invalid Construction`);
-            }
-            const elm = document.createElement(name);
-            Object.setPrototypeOf(elm, constructor.prototype);
-            return elm;
-        };
-        HTMLElementConstructor.prototype = HTMLElement.prototype;
-    }
     function cloneNode(node, deep) {
         return node.cloneNode(deep);
     }
@@ -7801,9 +8304,7 @@ function rendererFactory(baseRenderer) {
     function assertInstanceOfHTMLElement(elm, msg) {
         assert.invariant(elm instanceof HTMLElement, msg);
     }
-    const HTMLElementExported = HTMLElementConstructor;
 
-    exports.HTMLElementExported = HTMLElementExported;
     exports.addEventListener = addEventListener;
     exports.assertInstanceOfHTMLElement = assertInstanceOfHTMLElement;
     exports.attachShadow = attachShadow;
@@ -7863,6 +8364,8 @@ rendererFactory(null),
 {
     // insertStyleSheet implementation shares a global cache of stylesheet data
     insertStylesheet,
+    // relies on a shared global cache
+    createCustomElement,
     isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
     isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
 });
@@ -7963,36 +8466,44 @@ function deprecatedBuildCustomElementConstructor(Ctor) {
 //       This WeakSet usage is valid because this functionality is not meant to run in IE11.
 const hydratedCustomElements = new WeakSet();
 function buildCustomElementConstructor(Ctor) {
+    var _a;
     const HtmlPrototype = getComponentHtmlPrototype(Ctor);
-    return class extends HtmlPrototype {
-        constructor() {
-            super();
-            if (this.isConnected) {
-                // this if block is hit when there's already an un-upgraded element in the DOM with the same tag name.
-                hydrateComponent(this, Ctor, {});
-                hydratedCustomElements.add(this);
+    const { observedAttributes } = HtmlPrototype;
+    const { attributeChangedCallback } = HtmlPrototype.prototype;
+    return _a = class extends HTMLElement {
+            constructor() {
+                super();
+                if (this.isConnected) {
+                    // this if block is hit when there's already an un-upgraded element in the DOM with the same tag name.
+                    hydrateComponent(this, Ctor, {});
+                    hydratedCustomElements.add(this);
+                }
+                else {
+                    createVM(this, Ctor, renderer, {
+                        mode: 'open',
+                        owner: null,
+                        tagName: this.tagName,
+                    });
+                }
             }
-            else {
-                createVM(this, Ctor, renderer, {
-                    mode: 'open',
-                    owner: null,
-                    tagName: this.tagName,
-                });
+            connectedCallback() {
+                if (hydratedCustomElements.has(this)) {
+                    // This is an un-upgraded element that was hydrated in the constructor.
+                    hydratedCustomElements.delete(this);
+                }
+                else {
+                    connectRootElement(this);
+                }
             }
-        }
-        connectedCallback() {
-            if (hydratedCustomElements.has(this)) {
-                // This is an un-upgraded element that was hydrated in the constructor.
-                hydratedCustomElements.delete(this);
+            disconnectedCallback() {
+                disconnectRootElement(this);
             }
-            else {
-                connectRootElement(this);
+            attributeChangedCallback(name, oldValue, newValue) {
+                attributeChangedCallback.call(this, name, oldValue, newValue);
             }
-        }
-        disconnectedCallback() {
-            disconnectRootElement(this);
-        }
-    };
+        },
+        _a.observedAttributes = observedAttributes,
+        _a;
 }
 
 /*
@@ -8079,8 +8590,13 @@ function createElement(sel, options) {
     throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
   }
 
-  const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
-  let wasComponentUpgraded = false; // the custom element from the registry is expecting an upgrade callback
+  const {
+    createCustomElement
+  } = renderer; // tagName must be all lowercase, unfortunately, we have legacy code that is
+  // passing `sel` as a camel-case, which makes them invalid custom elements name
+  // the following line guarantees that this does not leaks beyond this point.
+
+  const tagName = StringToLowerCase.call(sel); // the custom element from the registry is expecting an upgrade callback
 
   /**
    * Note: if the upgradable constructor does not expect, or throw when we new it
@@ -8089,9 +8605,9 @@ function createElement(sel, options) {
    * an upgradable custom element.
    */
 
-  const element = new UpgradableConstructor(elm => {
+  const upgradeCallback = elm => {
     createVM(elm, Ctor, renderer, {
-      tagName: sel,
+      tagName,
       mode: options.mode !== 'closed' ? 'open' : 'closed',
       owner: null
     });
@@ -8100,15 +8616,21 @@ function createElement(sel, options) {
       ConnectingSlot.set(elm, connectRootElement);
       DisconnectingSlot.set(elm, disconnectRootElement);
     }
+  };
 
-    wasComponentUpgraded = true;
-  });
+  const connectedCallback = elm => {
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      connectRootElement(elm);
+    }
+  };
 
-  if (!wasComponentUpgraded) {
-    /* eslint-disable-next-line no-console */
-    console.error(`Unexpected tag name "${sel}". This name is a registered custom element, preventing LWC to upgrade the element.`);
-  }
+  const disconnectedCallback = elm => {
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      disconnectRootElement(elm);
+    }
+  };
 
+  const element = createCustomElement(tagName, upgradeCallback, connectedCallback, disconnectedCallback);
   return element;
 }
 
@@ -8180,6 +8702,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.25.1 */
+/* version: 2.27.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };