lwc 2.25.1 → 2.27.0

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

@@ -123,8 +123,10 @@
       setPrototypeOf = Object.setPrototypeOf;
   var isArray$1 = Array.isArray;
   var _Array$prototype = Array.prototype,
+      ArrayConcat$1 = _Array$prototype.concat,
       ArrayCopyWithin = _Array$prototype.copyWithin,
       ArrayFill = _Array$prototype.fill,
+      ArrayFilter = _Array$prototype.filter,
       ArrayIndexOf = _Array$prototype.indexOf,
       ArrayJoin = _Array$prototype.join,
       ArrayMap = _Array$prototype.map,
@@ -368,9 +370,9 @@
   // Increment whenever the LWC template compiler changes
 
 
-  var LWC_VERSION = "2.25.1";
+  var LWC_VERSION = "2.27.0";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.25.1 */
+  /** version: 2.27.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -464,7 +466,7 @@
       patch$1(propName);
     }
   }
-  /** version: 2.25.1 */
+  /** version: 2.27.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -482,7 +484,6 @@
     DUMMY_TEST_FLAG: null,
     ENABLE_ELEMENT_PATCH: null,
     ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
-    ENABLE_HMR: null,
     ENABLE_HTML_COLLECTIONS_PATCH: null,
     ENABLE_INNER_OUTER_TEXT_PATCH: null,
     ENABLE_MIXED_SHADOW_MODE: null,
@@ -492,7 +493,8 @@
     ENABLE_REACTIVE_SETTER: null,
     ENABLE_WIRE_SYNC_EMIT: null,
     ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
-    DISABLE_LIGHT_DOM_UNSCOPED_CSS: null
+    DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
+    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null
   };
 
   if (!_globalThis.lwcRuntimeFlags) {
@@ -558,7 +560,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.25.1 */
+  /** version: 2.27.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2426,7 +2428,9 @@
   var LightningElement = function LightningElement() {
     // 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');
     }
 
     var vm = vmBeingConstructed;
@@ -3790,13 +3794,11 @@
       throw new ReferenceError();
     }
 
-    if (lwcRuntimeFlags.ENABLE_HMR) {
-      var visited = new Set();
+    var visited = new Set();
 
-      while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
-        visited.add(tpl);
-        tpl = swappedTemplateMap.get(tpl);
-      }
+    while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
+      visited.add(tpl);
+      tpl = swappedTemplateMap.get(tpl);
     }
 
     return tpl;
@@ -3808,13 +3810,11 @@
       throw new ReferenceError();
     }
 
-    if (lwcRuntimeFlags.ENABLE_HMR) {
-      var visited = new Set();
+    var visited = new Set();
 
-      while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
-        visited.add(Ctor);
-        Ctor = swappedComponentMap.get(Ctor);
-      }
+    while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
+      visited.add(Ctor);
+      Ctor = swappedComponentMap.get(Ctor);
     }
 
     return Ctor;
@@ -3826,13 +3826,11 @@
       throw new ReferenceError();
     }
 
-    if (lwcRuntimeFlags.ENABLE_HMR) {
-      var visited = new Set();
+    var visited = new Set();
 
-      while (swappedStyleMap.has(style) && !visited.has(style)) {
-        visited.add(style);
-        style = swappedStyleMap.get(style);
-      }
+    while (swappedStyleMap.has(style) && !visited.has(style)) {
+      visited.add(style);
+      style = swappedStyleMap.get(style);
     }
 
     return style;
@@ -3842,56 +3840,54 @@
     if (process.env.NODE_ENV === 'production') {
       // this method should never leak to prod
       throw new ReferenceError();
-    }
+    } // tracking active component
 
-    if (lwcRuntimeFlags.ENABLE_HMR) {
-      // tracking active component
-      var Ctor = vm.def.ctor;
-      var 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
+    var Ctor = vm.def.ctor;
+    var 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
 
-      var tpl = vm.cmpTemplate;
+    componentVMs.add(vm); // tracking active template
 
-      if (tpl) {
-        var templateVMs = activeTemplates.get(tpl);
+    var tpl = vm.cmpTemplate;
 
-        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
+    if (tpl) {
+      var 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
 
-        var stylesheets = tpl.stylesheets;
+      templateVMs.add(vm); // tracking active styles associated to template
 
-        if (!isUndefined$1(stylesheets)) {
-          flattenStylesheets(stylesheets).forEach(function (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);
-            var stylesheetVMs = activeStyles.get(stylesheet);
+      var stylesheets = tpl.stylesheets;
 
-            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
+      if (!isUndefined$1(stylesheets)) {
+        flattenStylesheets(stylesheets).forEach(function (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);
+          var 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);
-          });
-        }
+
+          stylesheetVMs.add(vm);
+        });
       }
     }
   }
@@ -3900,42 +3896,40 @@
     if (process.env.NODE_ENV === 'production') {
       // this method should never leak to prod
       throw new ReferenceError();
-    }
+    } // tracking inactive component
 
-    if (lwcRuntimeFlags.ENABLE_HMR) {
-      // tracking inactive component
-      var Ctor = vm.def.ctor;
-      var list = activeComponents.get(Ctor);
 
-      if (!isUndefined$1(list)) {
-        // deleting the vm from the set to avoid leaking memory
-        list.delete(vm);
-      } // removing inactive template
+    var Ctor = vm.def.ctor;
+    var list = activeComponents.get(Ctor);
 
+    if (!isUndefined$1(list)) {
+      // deleting the vm from the set to avoid leaking memory
+      list.delete(vm);
+    } // removing inactive template
 
-      var tpl = vm.cmpTemplate;
 
-      if (tpl) {
-        list = activeTemplates.get(tpl);
+    var tpl = vm.cmpTemplate;
 
-        if (!isUndefined$1(list)) {
-          // deleting the vm from the set to avoid leaking memory
-          list.delete(vm);
-        } // removing active styles associated to template
+    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
 
-        var styles = tpl.stylesheets;
 
-        if (!isUndefined$1(styles)) {
-          flattenStylesheets(styles).forEach(function (style) {
-            list = activeStyles.get(style);
+      var styles = tpl.stylesheets;
 
-            if (!isUndefined$1(list)) {
-              // deleting the vm from the set to avoid leaking memory
-              list.delete(vm);
-            }
-          });
-        }
+      if (!isUndefined$1(styles)) {
+        flattenStylesheets(styles).forEach(function (style) {
+          list = activeStyles.get(style);
+
+          if (!isUndefined$1(list)) {
+            // deleting the vm from the set to avoid leaking memory
+            list.delete(vm);
+          }
+        });
       }
     }
   }
@@ -3950,10 +3944,6 @@
       }
     }
 
-    if (!lwcRuntimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
-    }
-
     return false;
   }
 
@@ -3967,10 +3957,6 @@
       }
     }
 
-    if (!lwcRuntimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
-    }
-
     return false;
   }
 
@@ -3982,10 +3968,6 @@
       return rehydrateHotStyle(oldStyle);
     }
 
-    if (!lwcRuntimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
-    }
-
     return false;
   }
   /*
@@ -4451,14 +4433,17 @@
   /**
    * 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) {
     var _getComponentInternal = getComponentInternalDef(vnode.ctor),
-        stylesheetToken = _getComponentInternal.template.stylesheetToken;
+        template = _getComponentInternal.template;
 
-    return !isUndefined$1(stylesheetToken) ? makeHostToken(stylesheetToken) : null;
+    var stylesheetToken = template.stylesheetToken;
+    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
   }
 
   function getNearestNativeShadowComponent(vm) {
@@ -4507,84 +4492,6 @@
 
     return null;
   }
-  /*
-   * Copyright (c) 2020, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-
-
-  function checkHasVM(elm) {
-    var 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 \"".concat(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) {
-    var getCustomElement = renderer.getCustomElement,
-        RendererHTMLElement = renderer.HTMLElementExported,
-        defineCustomElement = renderer.defineCustomElement; // 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();
-    var 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 = /*#__PURE__*/function (_RendererHTMLElement) {
-      _inherits(LWCUpgradableElement, _RendererHTMLElement);
-
-      var _super5 = _createSuper(LWCUpgradableElement);
-
-      function LWCUpgradableElement(upgradeCallback) {
-        var _this4;
-
-        _classCallCheck(this, LWCUpgradableElement);
-
-        _this4 = _super5.call(this);
-
-        if (isFunction$1(upgradeCallback)) {
-          upgradeCallback(_assertThisInitialized(_this4)); // nothing to do with the result for now
-        }
-
-        return _this4;
-      }
-
-      return _createClass(LWCUpgradableElement);
-    }(RendererHTMLElement);
-
-    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.
@@ -4611,6 +4518,12 @@
     /* VNodeType.CustomElement */
     ;
   }
+
+  function isVScopedSlotFragment(vnode) {
+    return vnode.type === 6
+    /* VNodeType.ScopedSlotFragment */
+    ;
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -5144,7 +5057,7 @@
   function mountCustomElement(vnode, parent, anchor, renderer) {
     var sel = vnode.sel,
         owner = vnode.owner;
-    var UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+    var createCustomElement = renderer.createCustomElement;
     /**
      * 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
@@ -5153,10 +5066,25 @@
      */
 
     var vm;
-    var elm = new UpgradableConstructor(function (elm) {
+
+    var upgradeCallback = function upgradeCallback(elm) {
       // the custom element from the registry is expecting an upgrade callback
       vm = createViewModelHook(elm, vnode, renderer);
-    });
+    };
+
+    var connectedCallback = function connectedCallback(elm) {
+      if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        connectRootElement(elm);
+      }
+    };
+
+    var disconnectedCallback = function disconnectedCallback(elm) {
+      if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        disconnectRootElement(elm);
+      }
+    };
+
+    var elm = createCustomElement(sel, upgradeCallback, connectedCallback, disconnectedCallback);
     vnode.elm = elm;
     vnode.vm = vm;
     linkNodeToShadow(elm, owner, renderer);
@@ -5164,8 +5092,6 @@
 
     if (vm) {
       allocateChildren(vnode, vm);
-    } else if (vnode.ctor !== UpgradableConstructor) {
-      throw new TypeError("Incorrect Component Constructor");
     }
 
     patchElementPropsAndAttrs$1(null, vnode, renderer);
@@ -5452,7 +5378,7 @@
     /* 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!
 
@@ -5486,11 +5412,15 @@
     return vm;
   }
 
-  function allocateInSlot(vm, children) {
-    var _a;
+  function allocateInSlot(vm, children, owner) {
+    var _a, _b;
 
-    var oldSlots = vm.cmpSlots;
-    var cmpSlots = vm.cmpSlots = create(null);
+    var oldSlotsMapping = vm.cmpSlots.slotAssignments;
+    var cmpSlotsMapping = create(null);
+    vm.cmpSlots = {
+      owner: owner,
+      slotAssignments: cmpSlotsMapping
+    };
 
     for (var _i15 = 0, len = children.length; _i15 < len; _i15 += 1) {
       var vnode = children[_i15];
@@ -5502,19 +5432,21 @@
       var 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;
       }
 
-      var vnodes = cmpSlots[slotName] = cmpSlots[slotName] || [];
+      var 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
-      var oldKeys = keys(oldSlots);
+      var oldKeys = keys(oldSlotsMapping);
 
-      if (oldKeys.length !== keys(cmpSlots).length) {
+      if (oldKeys.length !== keys(cmpSlotsMapping).length) {
         markComponentAsDirty(vm);
         return;
       }
@@ -5522,15 +5454,15 @@
       for (var _i16 = 0, _len4 = oldKeys.length; _i16 < _len4; _i16 += 1) {
         var key = oldKeys[_i16];
 
-        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;
         }
 
-        var oldVNodes = oldSlots[key];
-        var _vnodes = cmpSlots[key];
+        var oldVNodes = oldSlotsMapping[key];
+        var _vnodes = cmpSlotsMapping[key];
 
-        for (var j = 0, a = cmpSlots[key].length; j < a; j += 1) {
+        for (var j = 0, a = cmpSlotsMapping[key].length; j < a; j += 1) {
           if (oldVNodes[j] !== _vnodes[j]) {
             markComponentAsDirty(vm);
             return;
@@ -5729,6 +5661,21 @@
 
   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: factory,
+      owner: getVMBeingRendered(),
+      elm: undefined,
+      sel: undefined,
+      key: undefined,
+      slotName: slotName
+    };
   } // [st]atic node
 
 
@@ -5832,8 +5779,29 @@
       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];
+    if (!isUndefined$1(slotset) && !isUndefined$1(slotset.slotAssignments) && !isUndefined$1(slotset.slotAssignments[slotName]) && slotset.slotAssignments[slotName].length !== 0) {
+      children = slotset.slotAssignments[slotName].reduce(function (acc, vnode) {
+        // If the passed slot content is factory, evaluate it and use the produced vnodes
+        if (vnode && isVScopedSlotFragment(vnode)) {
+          var vmBeingRenderedInception = getVMBeingRendered();
+          var _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);
+        }
+      }, []);
     }
 
     var vmBeingRendered = getVMBeingRendered();
@@ -6240,7 +6208,8 @@
     st: st,
     gid: gid,
     fid: fid,
-    shc: shc
+    shc: shc,
+    ssf: ssf
   });
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6389,9 +6358,9 @@
     var _html$slots = html.slots,
         slots = _html$slots === void 0 ? EmptyArray : _html$slots;
 
-    for (var slotName in cmpSlots) {
+    for (var 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 ".concat(toString$1(cmpSlots[slotName]), " for slot \"").concat(slotName, "\" in ").concat(vm, "."));
+      assert.isTrue(isArray$1(cmpSlots.slotAssignments[slotName]), "Slots can only be set to an array, instead received ".concat(toString$1(cmpSlots.slotAssignments[slotName]), " for slot \"").concat(slotName, "\" in ").concat(vm, "."));
 
       if (slotName !== '' && ArrayIndexOf.call(slots, slotName) === -1) {
         // TODO [#1297]: this should never really happen because the compiler should always validate
@@ -6988,7 +6957,9 @@
       velements: EmptyArray,
       cmpProps: create(null),
       cmpFields: create(null),
-      cmpSlots: create(null),
+      cmpSlots: {
+        slotAssignments: create(null)
+      },
       oar: create(null),
       cmpTemplate: null,
       hydrated: Boolean(hydrated),
@@ -7509,21 +7480,21 @@
   var WireContextRegistrationEvent = /*#__PURE__*/function (_CustomEvent) {
     _inherits(WireContextRegistrationEvent, _CustomEvent);
 
-    var _super6 = _createSuper(WireContextRegistrationEvent);
+    var _super5 = _createSuper(WireContextRegistrationEvent);
 
     function WireContextRegistrationEvent(adapterToken, _ref3) {
-      var _this5;
+      var _this4;
 
       var setNewContext = _ref3.setNewContext,
           setDisconnectedCallback = _ref3.setDisconnectedCallback;
 
       _classCallCheck(this, WireContextRegistrationEvent);
 
-      _this5 = _super6.call(this, adapterToken, {
+      _this4 = _super5.call(this, adapterToken, {
         bubbles: true,
         composed: true
       });
-      defineProperties(_assertThisInitialized(_this5), {
+      defineProperties(_assertThisInitialized(_this4), {
         setNewContext: {
           value: setNewContext
         },
@@ -7531,7 +7502,7 @@
           value: setDisconnectedCallback
         }
       });
-      return _this5;
+      return _this4;
     }
 
     return _createClass(WireContextRegistrationEvent);
@@ -8232,13 +8203,27 @@
     // 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) ? "".concat(scopedToken, " ").concat(className) : "".concat(scopedToken, " ").concat(className, " ").concat(stylesheetTokenHost);
+        // The order of the className should be scopedToken className stylesheetTokenHost
+        var classTokens = [scopedToken, className, stylesheetTokenHost];
+        var classNames = ArrayFilter.call(classTokens, function (token) {
+          return !isNull(token);
+        });
+        className = ArrayJoin.call(classNames, ' ');
       } else if (!isUndefined$1(classMap)) {
-        classMap = Object.assign(Object.assign(Object.assign({}, classMap), _defineProperty({}, scopedToken, true)), isNull(stylesheetTokenHost) ? {} : _defineProperty({}, stylesheetTokenHost, true));
+        classMap = Object.assign(Object.assign(Object.assign({}, classMap), !isNull(scopedToken) ? _defineProperty({}, scopedToken, true) : {}), !isNull(stylesheetTokenHost) ? _defineProperty({}, stylesheetTokenHost, true) : {});
       } else {
-        className = isNull(stylesheetTokenHost) ? "".concat(scopedToken) : "".concat(scopedToken, " ").concat(stylesheetTokenHost);
+        // The order of the className should be scopedToken stylesheetTokenHost
+        var _classTokens = [scopedToken, stylesheetTokenHost];
+
+        var _classNames = ArrayFilter.call(_classTokens, function (token) {
+          return !isNull(token);
+        });
+
+        if (_classNames.length) {
+          className = ArrayJoin.call(_classNames, ' ');
+        }
       }
     }
 
@@ -8554,7 +8539,7 @@
 
     return ctor;
   }
-  /* version: 2.25.1 */
+  /* version: 2.27.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8714,6 +8699,779 @@
       insertLocalStylesheet(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.
+      var 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.
+
+      var clazz = /*#__PURE__*/function (_HTMLElementAlias) {
+        _inherits(clazz, _HTMLElementAlias);
+
+        var _super6 = _createSuper(clazz);
+
+        function clazz() {
+          _classCallCheck(this, clazz);
+
+          return _super6.apply(this, arguments);
+        }
+
+        return _createClass(clazz);
+      }(HTMLElementAlias);
+
+      customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
+      new clazz();
+      return true;
+    } catch (_a) {
+      return false;
+    }
+  }
+
+  var 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
+
+  var createCustomElementCompat = function createCustomElementCompat(tagName, upgradeCallback) {
+    var 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
+   */
+
+
+  var cachedConstructors = new Map();
+  var elementsUpgradedOutsideLWC = new WeakSet();
+  var 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.
+
+  var createUpgradableConstructor = function createUpgradableConstructor(_connectedCallback, _disconnectedCallback) {
+    // TODO [#2972]: this class should expose observedAttributes as necessary
+    return /*#__PURE__*/function (_HTMLElement) {
+      _inherits(UpgradableConstructor, _HTMLElement);
+
+      var _super7 = _createSuper(UpgradableConstructor);
+
+      function UpgradableConstructor(upgradeCallback) {
+        var _this5;
+
+        _classCallCheck(this, UpgradableConstructor);
+
+        _this5 = _super7.call(this); // If the element is not created using lwc.createElement(), e.g. `document.createElement('x-foo')`,
+        // then elementBeingUpgraded will be false
+
+        if (elementBeingUpgradedByLWC) {
+          upgradeCallback(_assertThisInitialized(_this5));
+        } else {
+          // keep track of elements that were not created by lwc.createElement,
+          // so we can ignore their lifecycle hooks
+          elementsUpgradedOutsideLWC.add(_assertThisInitialized(_this5)); // 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.
+        }
+
+        return _this5;
+      }
+
+      _createClass(UpgradableConstructor, [{
+        key: "connectedCallback",
+        value: function connectedCallback() {
+          if (!elementsUpgradedOutsideLWC.has(this)) {
+            _connectedCallback(this);
+          }
+        }
+      }, {
+        key: "disconnectedCallback",
+        value: function disconnectedCallback() {
+          if (!elementsUpgradedOutsideLWC.has(this)) {
+            _disconnectedCallback(this);
+          }
+        }
+      }]);
+
+      return UpgradableConstructor;
+    }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
+  };
+
+  var createCustomElementVanilla = function createCustomElementVanilla(tagName, upgradeCallback, connectedCallback, disconnectedCallback) {
+    // use global custom elements registry
+    var UpgradableConstructor = cachedConstructors.get(tagName);
+
+    if (isUndefined$1(UpgradableConstructor)) {
+      if (!isUndefined$1(customElements.get(tagName))) {
+        throw new Error("Unexpected tag name \"".concat(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.');
+    }
+
+    var _window = window,
+        NativeHTMLElement = _window.HTMLElement;
+    var _NativeHTMLElement$pr = NativeHTMLElement.prototype,
+        nativeHasAttribute = _NativeHTMLElement$pr.hasAttribute,
+        nativeSetAttribute = _NativeHTMLElement$pr.setAttribute,
+        nativeRemoveAttribute = _NativeHTMLElement$pr.removeAttribute,
+        nativeGetAttribute = _NativeHTMLElement$pr.getAttribute;
+    var definitionForElement = new WeakMap();
+    var pendingRegistryForElement = new WeakMap();
+    var definitionForConstructor = new WeakMap();
+    var registeredUserCtors = new WeakSet();
+    var pivotCtorByTag = new Map();
+    var globalDefinitionsByTag = new Map();
+    var globalDefinitionsByClass = new Map();
+    var awaitingUpgrade = new Map();
+    var EMPTY_SET = new Set();
+
+    function createDefinitionRecord(constructor) {
+      var _a;
+
+      var _constructor$prototyp = constructor.prototype,
+          connectedCallback = _constructor$prototyp.connectedCallback,
+          disconnectedCallback = _constructor$prototyp.disconnectedCallback,
+          adoptedCallback = _constructor$prototyp.adoptedCallback,
+          attributeChangedCallback = _constructor$prototyp.attributeChangedCallback;
+      var observedAttributes = new Set((_a = constructor.observedAttributes) !== null && _a !== void 0 ? _a : []);
+      return {
+        UserCtor: constructor,
+        PivotCtor: undefined,
+        connectedCallback: connectedCallback,
+        disconnectedCallback: disconnectedCallback,
+        adoptedCallback: adoptedCallback,
+        attributeChangedCallback: attributeChangedCallback,
+        observedAttributes: 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) {
+      var PivotCtor = /*#__PURE__*/function (_NativeHTMLElement) {
+        _inherits(PivotCtor, _NativeHTMLElement);
+
+        var _super8 = _createSuper(PivotCtor);
+
+        function PivotCtor(UserCtor) {
+          var _this6;
+
+          _classCallCheck(this, PivotCtor);
+
+          // 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.
+          _this6 = _super8.call(this);
+          var 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: ".concat(UserCtor.name, "."));
+            }
+          }
+
+          var definition = userCtorIsDefined ? getOrCreateDefinitionForConstructor(UserCtor) : globalDefinitionsByTag.get(tagName);
+
+          if (!isUndefined$1(definition)) {
+            internalUpgrade(_assertThisInitialized(_this6), 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(_assertThisInitialized(_this6), registeredDefinition);
+          }
+
+          return _this6;
+        }
+
+        _createClass(PivotCtor, [{
+          key: "connectedCallback",
+          value: function connectedCallback() {
+            var _a;
+
+            var 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)
+              var awaiting = awaitingUpgrade.get(tagName);
+
+              if (isUndefined$1(awaiting)) {
+                awaitingUpgrade.set(tagName, awaiting = new Set());
+              }
+
+              awaiting.add(this);
+            }
+          }
+        }, {
+          key: "disconnectedCallback",
+          value: function disconnectedCallback() {
+            var _a;
+
+            var 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)
+              var 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);
+              }
+            }
+          }
+        }, {
+          key: "adoptedCallback",
+          value: function adoptedCallback() {
+            var _a;
+
+            var definition = definitionForElement.get(this);
+            (_a = definition === null || definition === void 0 ? void 0 : definition.adoptedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+          }
+        }, {
+          key: "attributeChangedCallback",
+          value: function attributeChangedCallback(name, oldValue, newValue) {
+            var _a;
+
+            var 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]);
+            }
+          }
+        }]);
+
+        return PivotCtor;
+      }(NativeHTMLElement);
+
+      PivotCtor.observedAttributes = _toConsumableArray(registeredDefinition.observedAttributes);
+      return PivotCtor;
+    }
+
+    function getNewObservedAttributes(registeredDefinition, pivotDefinition) {
+      var observedAttributes = pivotDefinition.observedAttributes,
+          attributeChangedCallback = pivotDefinition.attributeChangedCallback;
+
+      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(_toConsumableArray(pivotDefinition.observedAttributes).filter(function (x) {
+        return !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(function () {
+        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) {
+      var newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
+
+      if (newObservedAttributes.size === 0) {
+        return;
+      }
+
+      var attributeChangedCallback = pivotDefinition.attributeChangedCallback; // 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)) {
+              var 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)) {
+              var 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.
+      var newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
+
+      if (getNewObservedAttributes(registeredDefinition, pivotDefinition).size === 0) {
+        return;
+      }
+
+      var attributeChangedCallback = pivotDefinition.attributeChangedCallback; // Approximate observedAttributes from the user class, but only for the new observed attributes
+
+      newObservedAttributes.forEach(function (name) {
+        if (nativeHasAttribute.call(instance, name)) {
+          var newValue = nativeGetAttribute.call(instance, name);
+          attributeChangedCallback.call(instance, name, null, newValue);
+        }
+      });
+    } // User extends this HTMLElement, which returns the CE being upgraded
+
+
+    var 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.');
+      }
+
+      var definition = definitionForConstructor.get(constructor);
+
+      if (!isUndefined$1(definition)) {
+        return definition;
+      }
+
+      return createDefinitionRecord(constructor);
+    }
+
+    var _window2 = window,
+        nativeRegistry = _window2.customElements;
+    var nativeDefine = nativeRegistry.define,
+        nativeWhenDefined = nativeRegistry.whenDefined,
+        nativeGet = nativeRegistry.get; // 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 \"".concat(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");
+      }
+
+      var definition = getOrCreateDefinitionForConstructor(constructor);
+      registeredUserCtors.add(constructor);
+      var 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.
+
+      var awaiting = awaitingUpgrade.get(tagName);
+
+      if (!isUndefined$1(awaiting)) {
+        awaitingUpgrade.delete(tagName);
+
+        var _iterator6 = _createForOfIteratorHelper(awaiting),
+            _step6;
+
+        try {
+          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+            var element = _step6.value;
+            var 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);
+            }
+          }
+        } catch (err) {
+          _iterator6.e(err);
+        } finally {
+          _iterator6.f();
+        }
+      }
+    };
+
+    CustomElementRegistry.prototype.get = function get(tagName) {
+      var NativeCtor = nativeGet.call(nativeRegistry, tagName);
+
+      if (!isUndefined$1(NativeCtor)) {
+        var 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(function (NativeCtor) {
+        var 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.
+      var 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()`.
+
+
+      var constructor = this.constructor;
+      var 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.
+
+
+      var PivotCtor = definition.PivotCtor,
+          UserCtor = definition.UserCtor;
+      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);
+      var PivotCtor = pivotCtorByTag.get(tagName);
+
+      if (isUndefined$1(PivotCtor)) {
+        var 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
+   */
+
+
+  var createScopedConstructor;
+  var 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.
+
+
+  var createUserConstructor = function createUserConstructor(upgradeCallback, _connectedCallback2, _disconnectedCallback2, HTMLElementToExtend) {
+    // TODO [#2972]: this class should expose observedAttributes as necessary
+    return /*#__PURE__*/function (_HTMLElementToExtend) {
+      _inherits(UserConstructor, _HTMLElementToExtend);
+
+      var _super9 = _createSuper(UserConstructor);
+
+      function UserConstructor() {
+        var _this7;
+
+        _classCallCheck(this, UserConstructor);
+
+        _this7 = _super9.call(this);
+        upgradeCallback(_assertThisInitialized(_this7));
+        return _this7;
+      }
+
+      _createClass(UserConstructor, [{
+        key: "connectedCallback",
+        value: function connectedCallback() {
+          _connectedCallback2(this);
+        }
+      }, {
+        key: "disconnectedCallback",
+        value: function disconnectedCallback() {
+          _disconnectedCallback2(this);
+        }
+      }]);
+
+      return UserConstructor;
+    }(HTMLElementToExtend);
+  };
+
+  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');
+    }
+
+    var UserConstructor = createUserConstructor(upgradeCallback, connectedCallback, disconnectedCallback, CachedHTMLElement);
+    var 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.
+   */
+
+
+  var 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.
@@ -8782,7 +9540,7 @@
       function isNull(obj) {
         return obj === null;
       }
-      /** version: 2.25.1 */
+      /** version: 2.27.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8792,87 +9550,6 @@
        */
 
 
-      exports.getCustomElement = void 0;
-      exports.defineCustomElement = void 0;
-      var 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.
-          var 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.
-
-          var clazz = /*#__PURE__*/function (_HTMLElementAlias) {
-            _inherits(clazz, _HTMLElementAlias);
-
-            var _super7 = _createSuper(clazz);
-
-            function clazz() {
-              _classCallCheck(this, clazz);
-
-              return _super7.apply(this, arguments);
-            }
-
-            return _createClass(clazz);
-          }(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 {
-        var registry = Object.create(null);
-        var 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");
-          }
-
-          var constructor = this.constructor;
-          var name = reverseRegistry.get(constructor);
-
-          if (!name) {
-            throw new TypeError("Invalid Construction");
-          }
-
-          var elm = document.createElement(name);
-          Object.setPrototypeOf(elm, constructor.prototype);
-          return elm;
-        };
-
-        HTMLElementConstructor.prototype = HTMLElement.prototype;
-      }
-
       function cloneNode(node, deep) {
         return node.cloneNode(deep);
       }
@@ -8931,18 +9608,18 @@
           var wrapperTags = topLevelWrappingMap[getTagName(html)];
 
           if (!isUndefined(wrapperTags)) {
-            var _iterator6 = _createForOfIteratorHelper(wrapperTags),
-                _step6;
+            var _iterator7 = _createForOfIteratorHelper(wrapperTags),
+                _step7;
 
             try {
-              for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-                var wrapperTag = _step6.value;
+              for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+                var wrapperTag = _step7.value;
                 html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
               }
             } catch (err) {
-              _iterator6.e(err);
+              _iterator7.e(err);
             } finally {
-              _iterator6.f();
+              _iterator7.f();
             }
           } // For IE11, the document title must not be undefined, but it can be an empty string
           // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
@@ -9088,8 +9765,6 @@
         assert.invariant(elm instanceof HTMLElement, msg);
       }
 
-      var HTMLElementExported = HTMLElementConstructor;
-      exports.HTMLElementExported = HTMLElementExported;
       exports.addEventListener = addEventListener;
       exports.assertInstanceOfHTMLElement = assertInstanceOfHTMLElement;
       exports.attachShadow = attachShadow;
@@ -9148,6 +9823,8 @@
   {
     // insertStyleSheet implementation shares a global cache of stylesheet data
     insertStylesheet: insertStylesheet,
+    // relies on a shared global cache
+    createCustomElement: createCustomElement,
     isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
     isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN)
   });
@@ -9268,35 +9945,39 @@
   var hydratedCustomElements = new WeakSet();
 
   function buildCustomElementConstructor(Ctor) {
+    var _a;
+
     var HtmlPrototype = getComponentHtmlPrototype(Ctor);
-    return /*#__PURE__*/function (_HtmlPrototype) {
-      _inherits(_class, _HtmlPrototype);
+    var observedAttributes = HtmlPrototype.observedAttributes;
+    var _attributeChangedCallback = HtmlPrototype.prototype.attributeChangedCallback;
+    return _a = /*#__PURE__*/function (_HTMLElement2) {
+      _inherits(_a, _HTMLElement2);
 
-      var _super8 = _createSuper(_class);
+      var _super10 = _createSuper(_a);
 
-      function _class() {
-        var _this6;
+      function _a() {
+        var _this8;
 
-        _classCallCheck(this, _class);
+        _classCallCheck(this, _a);
 
-        _this6 = _super8.call(this);
+        _this8 = _super10.call(this);
 
-        if (_this6.isConnected) {
+        if (_this8.isConnected) {
           // this if block is hit when there's already an un-upgraded element in the DOM with the same tag name.
-          hydrateComponent(_assertThisInitialized(_this6), Ctor, {});
-          hydratedCustomElements.add(_assertThisInitialized(_this6));
+          hydrateComponent(_assertThisInitialized(_this8), Ctor, {});
+          hydratedCustomElements.add(_assertThisInitialized(_this8));
         } else {
-          createVM(_assertThisInitialized(_this6), Ctor, renderer, {
+          createVM(_assertThisInitialized(_this8), Ctor, renderer, {
             mode: 'open',
             owner: null,
-            tagName: _this6.tagName
+            tagName: _this8.tagName
           });
         }
 
-        return _this6;
+        return _this8;
       }
 
-      _createClass(_class, [{
+      _createClass(_a, [{
         key: "connectedCallback",
         value: function connectedCallback() {
           if (hydratedCustomElements.has(this)) {
@@ -9311,10 +9992,15 @@
         value: function disconnectedCallback() {
           disconnectRootElement(this);
         }
+      }, {
+        key: "attributeChangedCallback",
+        value: function attributeChangedCallback(name, oldValue, newValue) {
+          _attributeChangedCallback.call(this, name, oldValue, newValue);
+        }
       }]);
 
-      return _class;
-    }(HtmlPrototype);
+      return _a;
+    }( /*#__PURE__*/_wrapNativeSuper(HTMLElement)), _a.observedAttributes = observedAttributes, _a;
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -9400,8 +10086,11 @@
       throw new TypeError("\"createElement\" function expects an \"is\" option with a valid component constructor.");
     }
 
-    var UpgradableConstructor = getUpgradableConstructor(sel, renderer);
-    var wasComponentUpgraded = false; // the custom element from the registry is expecting an upgrade callback
+    var createCustomElement = renderer.createCustomElement; // 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.
+
+    var 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
@@ -9410,9 +10099,9 @@
      * an upgradable custom element.
      */
 
-    var element = new UpgradableConstructor(function (elm) {
+    var upgradeCallback = function upgradeCallback(elm) {
       createVM(elm, Ctor, renderer, {
-        tagName: sel,
+        tagName: tagName,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
         owner: null
       });
@@ -9421,15 +10110,21 @@
         ConnectingSlot.set(elm, connectRootElement);
         DisconnectingSlot.set(elm, disconnectRootElement);
       }
+    };
 
-      wasComponentUpgraded = true;
-    });
+    var connectedCallback = function connectedCallback(elm) {
+      if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        connectRootElement(elm);
+      }
+    };
 
-    if (!wasComponentUpgraded) {
-      /* eslint-disable-next-line no-console */
-      console.error("Unexpected tag name \"".concat(sel, "\". This name is a registered custom element, preventing LWC to upgrade the element."));
-    }
+    var disconnectedCallback = function disconnectedCallback(elm) {
+      if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        disconnectRootElement(elm);
+      }
+    };
 
+    var element = createCustomElement(tagName, upgradeCallback, connectedCallback, disconnectedCallback);
     return element;
   }
   /*
@@ -9512,7 +10207,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.25.1 */
+  /* version: 2.27.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;