lwc 2.7.3 → 2.7.4

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

@@ -351,7 +351,11 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.7.3 */
+
+  var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+  var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+  var XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
+  /** version: 2.7.4 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -360,7 +364,6 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-
   function detect(propName) {
     return Object.getOwnPropertyDescriptor(Element.prototype, propName) === undefined;
   }
@@ -529,7 +532,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.7.3 */
+  /** version: 2.7.4 */
 
   /* proxy-compat-disable */
 
@@ -1048,6 +1051,24 @@
    */
 
 
+  function addErrorComponentStack(vm, error) {
+    if (!isFrozen(error) && isUndefined$1(error.wcStack)) {
+      var wcStack = getErrorComponentStack(vm);
+      defineProperty(error, 'wcStack', {
+        get: function get() {
+          return wcStack;
+        }
+      });
+    }
+  }
+  /*
+   * 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
+   */
+
+
   function log(method, message, vm) {
     var msg = "[LWC ".concat(method, "]: ").concat(message);
 
@@ -1082,207 +1103,12 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
+  // to inject at runtime.
 
 
-  function isUndef(s) {
-    return s === undefined;
-  }
-
-  function sameVnode(vnode1, vnode2) {
-    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
-  }
-
-  function isVNode(vnode) {
-    return vnode != null;
-  }
-
-  function createKeyToOldIdx(children, beginIdx, endIdx) {
-    var map = {};
-    var j, key, ch; // TODO [#1637]: simplify this by assuming that all vnodes has keys
-
-    for (j = beginIdx; j <= endIdx; ++j) {
-      ch = children[j];
-
-      if (isVNode(ch)) {
-        key = ch.key;
-
-        if (key !== undefined) {
-          map[key] = j;
-        }
-      }
-    }
-
-    return map;
-  }
-
-  function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      var ch = vnodes[startIdx];
-
-      if (isVNode(ch)) {
-        ch.hook.create(ch);
-        ch.hook.insert(ch, parentElm, before);
-      }
-    }
-  }
-
-  function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      var ch = vnodes[startIdx]; // text nodes do not have logic associated to them
-
-      if (isVNode(ch)) {
-        ch.hook.remove(ch, parentElm);
-      }
-    }
-  }
-
-  function updateDynamicChildren(parentElm, oldCh, newCh) {
-    var oldStartIdx = 0;
-    var newStartIdx = 0;
-    var oldEndIdx = oldCh.length - 1;
-    var oldStartVnode = oldCh[0];
-    var oldEndVnode = oldCh[oldEndIdx];
-    var newChEnd = newCh.length - 1;
-    var newEndIdx = newChEnd;
-    var newStartVnode = newCh[0];
-    var newEndVnode = newCh[newEndIdx];
-    var oldKeyToIdx;
-    var idxInOld;
-    var elmToMove;
-    var before;
-
-    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-      if (!isVNode(oldStartVnode)) {
-        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-      } else if (!isVNode(oldEndVnode)) {
-        oldEndVnode = oldCh[--oldEndIdx];
-      } else if (!isVNode(newStartVnode)) {
-        newStartVnode = newCh[++newStartIdx];
-      } else if (!isVNode(newEndVnode)) {
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newStartVnode)) {
-        patchVnode(oldStartVnode, newStartVnode);
-        oldStartVnode = oldCh[++oldStartIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else if (sameVnode(oldEndVnode, newEndVnode)) {
-        patchVnode(oldEndVnode, newEndVnode);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newEndVnode)) {
-        // Vnode moved right
-        patchVnode(oldStartVnode, newEndVnode);
-        newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling$1(oldEndVnode.elm));
-        oldStartVnode = oldCh[++oldStartIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldEndVnode, newStartVnode)) {
-        // Vnode moved left
-        patchVnode(oldEndVnode, newStartVnode);
-        newStartVnode.hook.move(oldEndVnode, parentElm, oldStartVnode.elm);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else {
-        if (oldKeyToIdx === undefined) {
-          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-        }
-
-        idxInOld = oldKeyToIdx[newStartVnode.key];
-
-        if (isUndef(idxInOld)) {
-          // New element
-          newStartVnode.hook.create(newStartVnode);
-          newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
-          newStartVnode = newCh[++newStartIdx];
-        } else {
-          elmToMove = oldCh[idxInOld];
-
-          if (isVNode(elmToMove)) {
-            if (elmToMove.sel !== newStartVnode.sel) {
-              // New element
-              newStartVnode.hook.create(newStartVnode);
-              newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
-            } else {
-              patchVnode(elmToMove, newStartVnode);
-              oldCh[idxInOld] = undefined;
-              newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
-            }
-          }
-
-          newStartVnode = newCh[++newStartIdx];
-        }
-      }
-    }
-
-    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-      if (oldStartIdx > oldEndIdx) {
-        // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
-        // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-        var _i6 = newEndIdx;
-        var n;
-
-        do {
-          n = newCh[++_i6];
-        } while (!isVNode(n) && _i6 < newChEnd);
-
-        before = isVNode(n) ? n.elm : null;
-        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
-      } else {
-        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
-      }
-    }
-  }
-
-  function updateStaticChildren(parentElm, oldCh, newCh) {
-    var oldChLength = oldCh.length;
-    var newChLength = newCh.length;
-
-    if (oldChLength === 0) {
-      // the old list is empty, we can directly insert anything new
-      addVnodes(parentElm, null, newCh, 0, newChLength);
-      return;
-    }
-
-    if (newChLength === 0) {
-      // the old list is nonempty and the new list is empty so we can directly remove all old nodes
-      // this is the case in which the dynamic children of an if-directive should be removed
-      removeVnodes(parentElm, oldCh, 0, oldChLength);
-      return;
-    } // if the old list is not empty, the new list MUST have the same
-    // amount of nodes, that's why we call this static children
-
-
-    var referenceElm = null;
-
-    for (var _i7 = newChLength - 1; _i7 >= 0; _i7 -= 1) {
-      var vnode = newCh[_i7];
-      var oldVNode = oldCh[_i7];
-
-      if (vnode !== oldVNode) {
-        if (isVNode(oldVNode)) {
-          if (isVNode(vnode)) {
-            // both vnodes must be equivalent, and se just need to patch them
-            patchVnode(oldVNode, vnode);
-            referenceElm = vnode.elm;
-          } else {
-            // removing the old vnode since the new one is null
-            oldVNode.hook.remove(oldVNode, parentElm);
-          }
-        } else if (isVNode(vnode)) {
-          // this condition is unnecessary
-          vnode.hook.create(vnode); // insert the new node one since the old one is null
-
-          vnode.hook.insert(vnode, parentElm, referenceElm);
-          referenceElm = vnode.elm;
-        }
-      }
-    }
-  }
-
-  function patchVnode(oldVnode, vnode) {
-    if (oldVnode !== vnode) {
-      vnode.elm = oldVnode.elm;
-      vnode.hook.update(oldVnode, vnode);
-    }
-  }
+  var HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
+  var HTMLElementPrototype = HTMLElementConstructor$1.prototype;
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1290,7 +1116,6 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-
   var defaultDefHTMLPropertyNames = ['accessKey', 'dir', 'draggable', 'hidden', 'id', 'lang', 'spellcheck', 'tabIndex', 'title'];
 
   function offsetPropertyErrorMessage(name) {
@@ -1409,6 +1234,40 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
+  /**
+   * This is a descriptor map that contains
+   * all standard properties that a Custom Element can support (including AOM properties), which
+   * determines what kind of capabilities the Base HTML Element and
+   * Base Lightning Element should support.
+   */
+
+
+  var HTMLElementOriginalDescriptors = create(null);
+  forEach.call(keys(AriaPropNameToAttrNameMap), function (propName) {
+    // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
+    // in IE11, some properties are on Element.prototype instead of HTMLElement, just to be sure.
+    var descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
+
+    if (!isUndefined$1(descriptor)) {
+      HTMLElementOriginalDescriptors[propName] = descriptor;
+    }
+  });
+  forEach.call(defaultDefHTMLPropertyNames, function (propName) {
+    // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
+    // in IE11, id property is on Element.prototype instead of HTMLElement, and we suspect that more will fall into
+    // this category, so, better to be sure.
+    var descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
+
+    if (!isUndefined$1(descriptor)) {
+      HTMLElementOriginalDescriptors[propName] = descriptor;
+    }
+  });
+  /*
+   * 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
+   */
 
   function generateDataDescriptor(options) {
     return assign({
@@ -1736,56 +1595,11 @@
   function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
   }
-  /*
-   * 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
+  /**
+   * Copyright (C) 2017 salesforce.com, inc.
    */
-  // This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
-  // to inject at runtime.
 
 
-  var HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
-  var HTMLElementPrototype = HTMLElementConstructor$1.prototype;
-  /*
-   * 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
-   */
-
-  /**
-   * This is a descriptor map that contains
-   * all standard properties that a Custom Element can support (including AOM properties), which
-   * determines what kind of capabilities the Base HTML Element and
-   * Base Lightning Element should support.
-   */
-
-  var HTMLElementOriginalDescriptors = create(null);
-  forEach.call(keys(AriaPropNameToAttrNameMap), function (propName) {
-    // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
-    // in IE11, some properties are on Element.prototype instead of HTMLElement, just to be sure.
-    var descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
-
-    if (!isUndefined$1(descriptor)) {
-      HTMLElementOriginalDescriptors[propName] = descriptor;
-    }
-  });
-  forEach.call(defaultDefHTMLPropertyNames, function (propName) {
-    // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
-    // in IE11, id property is on Element.prototype instead of HTMLElement, and we suspect that more will fall into
-    // this category, so, better to be sure.
-    var descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
-
-    if (!isUndefined$1(descriptor)) {
-      HTMLElementOriginalDescriptors[propName] = descriptor;
-    }
-  });
-  /**
-   * Copyright (C) 2017 salesforce.com, inc.
-   */
-
   var isArray = Array.isArray;
   var ObjectDotPrototype = Object.prototype,
       _getPrototypeOf = Object.getPrototypeOf,
@@ -2713,7 +2527,9 @@
     if (vm.renderMode === 1
     /* Shadow */
     ) {
-      doAttachShadow(vm);
+      vm.renderRoot = doAttachShadow(vm);
+    } else {
+      vm.renderRoot = elm;
     } // Adding extra guard rails in DEV mode.
 
 
@@ -2732,13 +2548,15 @@
         mode = vm.mode,
         shadowMode = vm.shadowMode,
         ctor = vm.def.ctor;
-    var cmpRoot = attachShadow$1(elm, (_attachShadow$ = {}, _defineProperty(_attachShadow$, KEY__SYNTHETIC_MODE, shadowMode === 1), _defineProperty(_attachShadow$, "delegatesFocus", Boolean(ctor.delegatesFocus)), _defineProperty(_attachShadow$, "mode", mode), _attachShadow$));
-    vm.cmpRoot = cmpRoot;
-    associateVM(cmpRoot, vm);
+    var shadowRoot = attachShadow$1(elm, (_attachShadow$ = {}, _defineProperty(_attachShadow$, KEY__SYNTHETIC_MODE, shadowMode === 1), _defineProperty(_attachShadow$, "delegatesFocus", Boolean(ctor.delegatesFocus)), _defineProperty(_attachShadow$, "mode", mode), _attachShadow$));
+    vm.shadowRoot = shadowRoot;
+    associateVM(shadowRoot, vm);
 
     if (process.env.NODE_ENV !== 'production') {
-      patchShadowRootWithRestrictions(cmpRoot);
+      patchShadowRootWithRestrictions(shadowRoot);
     }
+
+    return shadowRoot;
   }
 
   function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
@@ -2883,7 +2701,7 @@
         }
       }
 
-      return vm.cmpRoot;
+      return vm.shadowRoot;
     },
 
     get shadowRoot() {
@@ -2931,7 +2749,7 @@
 
 
   var _loop = function _loop() {
-    var childGetter = _childGetters[_i8];
+    var childGetter = _childGetters[_i6];
     queryAndChildGetterDescriptors[childGetter] = {
       get: function get() {
         var vm = getAssociatedVM(this);
@@ -2948,7 +2766,7 @@
     };
   };
 
-  for (var _i8 = 0, _childGetters = childGetters; _i8 < _childGetters.length; _i8++) {
+  for (var _i6 = 0, _childGetters = childGetters; _i6 < _childGetters.length; _i6++) {
     _loop();
   }
 
@@ -2972,7 +2790,7 @@
 
 
   var _loop2 = function _loop2() {
-    var queryMethod = _queryMethods[_i9];
+    var queryMethod = _queryMethods[_i7];
     queryAndChildGetterDescriptors[queryMethod] = {
       value: function value(arg) {
         var vm = getAssociatedVM(this);
@@ -2990,7 +2808,7 @@
     };
   };
 
-  for (var _i9 = 0, _queryMethods = queryMethods; _i9 < _queryMethods.length; _i9++) {
+  for (var _i7 = 0, _queryMethods = queryMethods; _i7 < _queryMethods.length; _i7++) {
     _loop2();
   }
 
@@ -3513,8 +3331,8 @@
     }
 
     if (!isUndefined$1(fields)) {
-      for (var _i10 = 0, n = fields.length; _i10 < n; _i10++) {
-        var _fieldName2 = fields[_i10];
+      for (var _i8 = 0, n = fields.length; _i8 < n; _i8++) {
+        var _fieldName2 = fields[_i8];
         descriptor = getOwnPropertyDescriptor$1(proto, _fieldName2);
 
         if (process.env.NODE_ENV !== 'production') {
@@ -3735,8 +3553,8 @@
         superObservedAttributes = _SuperClass$observedA === void 0 ? [] : _SuperClass$observedA;
     var descriptors = create(null); // expose getters and setters for each public props on the new Element Bridge
 
-    for (var _i11 = 0, _len3 = props.length; _i11 < _len3; _i11 += 1) {
-      var _propName2 = props[_i11];
+    for (var _i9 = 0, _len3 = props.length; _i9 < _len3; _i9 += 1) {
+      var _propName2 = props[_i9];
       attributeToPropMap[htmlPropertyToAttribute(_propName2)] = _propName2;
       descriptors[_propName2] = {
         get: createGetter(_propName2),
@@ -3747,8 +3565,8 @@
     } // expose public methods as props on the new Element Bridge
 
 
-    for (var _i12 = 0, _len4 = methods.length; _i12 < _len4; _i12 += 1) {
-      var methodName = methods[_i12];
+    for (var _i10 = 0, _len4 = methods.length; _i10 < _len4; _i10 += 1) {
+      var methodName = methods[_i10];
       descriptors[methodName] = {
         value: createMethodCaller(methodName),
         writable: true,
@@ -4304,6 +4122,11 @@
     return def;
   }
 
+  function getComponentHtmlPrototype(Ctor) {
+    var def = getComponentInternalDef(Ctor);
+    return def.bridge;
+  }
+
   var lightingElementDef = {
     ctor: LightningElement,
     name: LightningElement.name,
@@ -4364,6 +4187,75 @@
       methods: publicMethods
     };
   }
+  /*
+   * 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 getUpgradableConstructor(tagName) {
+    // 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$1(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 (_HTMLElementExported$) {
+      _inherits(LWCUpgradableElement, _HTMLElementExported$);
+
+      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);
+    }(HTMLElementExported$1);
+
+    defineCustomElement$1(tagName, CE);
+    return CE;
+  }
+  /*
+   * 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
+   */
+
+
+  function isVBaseElement(vnode) {
+    var type = vnode.type;
+    return type === 2
+    /* Element */
+    || type === 3
+    /* CustomElement */
+    ;
+  }
+
+  function isSameVnode(vnode1, vnode2) {
+    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -4372,8 +4264,6 @@
    */
 
 
-  var xlinkNS = 'http://www.w3.org/1999/xlink';
-  var xmlNS = 'http://www.w3.org/XML/1998/namespace';
   var ColonCharCode = 58;
 
   function patchAttributes(oldVnode, vnode) {
@@ -4400,10 +4290,10 @@
 
         if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
           // Assume xml namespace
-          setAttribute$1(elm, key, cur, xmlNS);
+          setAttribute$1(elm, key, cur, XML_NAMESPACE);
         } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
           // Assume xlink namespace
-          setAttribute$1(elm, key, cur, xlinkNS);
+          setAttribute$1(elm, key, cur, XLINK_NAMESPACE);
         } else if (isNull(cur) || isUndefined$1(cur)) {
           removeAttribute$1(elm, key);
         } else {
@@ -4620,8 +4510,8 @@
       return;
     }
 
-    for (var _i13 = 0; _i13 < styleDecls.length; _i13++) {
-      var _styleDecls$_i = _slicedToArray(styleDecls[_i13], 3),
+    for (var _i11 = 0; _i11 < styleDecls.length; _i11++) {
+      var _styleDecls$_i = _slicedToArray(styleDecls[_i11], 3),
           prop = _styleDecls$_i[0],
           value = _styleDecls$_i[1],
           important = _styleDecls$_i[2];
@@ -4637,6 +4527,151 @@
    */
 
 
+  var TextHook = {
+    create: function create(vnode) {
+      var owner = vnode.owner;
+      var elm = createText$1(vnode.text);
+      linkNodeToShadow(elm, owner);
+      vnode.elm = elm;
+    },
+    update: updateNodeHook,
+    insert: insertNode,
+    move: insertNode,
+    remove: removeNode
+  };
+  var CommentHook = {
+    create: function create(vnode) {
+      var owner = vnode.owner,
+          text = vnode.text;
+      var elm = createComment$1(text);
+      linkNodeToShadow(elm, owner);
+      vnode.elm = elm;
+    },
+    update: updateNodeHook,
+    insert: insertNode,
+    move: insertNode,
+    remove: removeNode
+  }; // insert is called after update, which is used somewhere else (via a module)
+  // to mark the vm as inserted, that means we cannot use update as the main channel
+  // to rehydrate when dirty, because sometimes the element is not inserted just yet,
+  // which breaks some invariants. For that reason, we have the following for any
+  // Custom Element that is inserted via a template.
+
+  var ElementHook = {
+    create: function create(vnode) {
+      var sel = vnode.sel,
+          owner = vnode.owner,
+          svg = vnode.data.svg;
+      var namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
+      var elm = createElement$2(sel, namespace);
+      linkNodeToShadow(elm, owner);
+      fallbackElmHook(elm, vnode);
+      vnode.elm = elm;
+      patchElementPropsAndAttrs$1(null, vnode);
+    },
+    update: function update(oldVnode, vnode) {
+      patchElementPropsAndAttrs$1(oldVnode, vnode);
+      patchChildren(vnode.elm, oldVnode.children, vnode.children);
+    },
+    insert: function insert(vnode, parentNode, referenceNode) {
+      insertNode(vnode, parentNode, referenceNode);
+      createChildrenHook(vnode);
+    },
+    move: insertNode,
+    remove: function remove(vnode, parentNode) {
+      removeNode(vnode, parentNode);
+      removeChildren(vnode);
+    }
+  };
+  var CustomElementHook = {
+    create: function create(vnode) {
+      var sel = vnode.sel,
+          owner = vnode.owner;
+      var UpgradableConstructor = getUpgradableConstructor(sel);
+      /**
+       * 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
+       * mechanism that only passes that argument if the constructor is known to be
+       * an upgradable custom element.
+       */
+
+      var vm;
+      var elm = new UpgradableConstructor(function (elm) {
+        // the custom element from the registry is expecting an upgrade callback
+        vm = createViewModelHook(elm, vnode);
+      });
+      linkNodeToShadow(elm, owner);
+      vnode.elm = elm;
+
+      if (vm) {
+        allocateChildren(vnode, vm);
+      } else if (vnode.ctor !== UpgradableConstructor) {
+        throw new TypeError("Incorrect Component Constructor");
+      }
+
+      patchElementPropsAndAttrs$1(null, vnode);
+    },
+    update: function update(oldVnode, vnode) {
+      patchElementPropsAndAttrs$1(oldVnode, vnode);
+      var vm = getAssociatedVMIfPresent(vnode.elm);
+
+      if (vm) {
+        // in fallback mode, the allocation will always set children to
+        // empty and delegate the real allocation to the slot elements
+        allocateChildren(vnode, vm);
+      } // in fallback mode, the children will be always empty, so, nothing
+      // will happen, but in native, it does allocate the light dom
+
+
+      patchChildren(vnode.elm, oldVnode.children, vnode.children);
+
+      if (vm) {
+        if (process.env.NODE_ENV !== 'production') {
+          assert.isTrue(isArray$1(vnode.children), "Invalid vnode for a custom element, it must have children defined.");
+        } // this will probably update the shadowRoot, but only if the vm is in a dirty state
+        // this is important to preserve the top to bottom synchronous rendering phase.
+
+
+        rerenderVM(vm);
+      }
+    },
+    insert: function insert(vnode, parentNode, referenceNode) {
+      insertNode(vnode, parentNode, referenceNode);
+      var vm = getAssociatedVMIfPresent(vnode.elm);
+
+      if (vm) {
+        if (process.env.NODE_ENV !== 'production') {
+          assert.isTrue(vm.state === 0
+          /* created */
+          , "".concat(vm, " cannot be recycled."));
+        }
+
+        runConnectedCallback(vm);
+      }
+
+      createChildrenHook(vnode);
+
+      if (vm) {
+        appendVM(vm);
+      }
+    },
+    move: insertNode,
+    remove: function remove(vnode, parentNode) {
+      removeNode(vnode, parentNode);
+      var vm = getAssociatedVMIfPresent(vnode.elm);
+
+      if (vm) {
+        // for custom elements we don't have to go recursively because the removeVM routine
+        // will take care of disconnecting any child VM attached to its shadow as well.
+        removeVM(vm);
+      }
+    }
+  };
+
+  function isVNode(vnode) {
+    return vnode != null;
+  }
+
   function observeElementChildNodes(elm) {
     elm.$domManual$ = true;
   }
@@ -4656,6 +4691,22 @@
     }
   }
 
+  function linkNodeToShadow(elm, owner) {
+    var renderRoot = owner.renderRoot,
+        renderMode = owner.renderMode,
+        shadowMode = owner.shadowMode; // TODO [#1164]: this should eventually be done by the polyfill directly
+
+    if (isSyntheticShadowDefined$1) {
+      if (shadowMode === 1
+      /* Synthetic */
+      || renderMode === 0
+      /* Light */
+      ) {
+        elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
+      }
+    }
+  }
+
   function updateNodeHook(oldVnode, vnode) {
     var elm = vnode.elm,
         text = vnode.text;
@@ -4673,7 +4724,7 @@
     }
   }
 
-  function insertNodeHook(vnode, parentNode, referenceNode) {
+  function insertNode(vnode, parentNode, referenceNode) {
     if (process.env.NODE_ENV !== 'production') {
       unlockDomMutation();
     }
@@ -4685,7 +4736,7 @@
     }
   }
 
-  function removeNodeHook(vnode, parentNode) {
+  function removeNode(vnode, parentNode) {
     if (process.env.NODE_ENV !== 'production') {
       unlockDomMutation();
     }
@@ -4697,7 +4748,7 @@
     }
   }
 
-  function patchElementPropsAndAttrs(oldVnode, vnode) {
+  function patchElementPropsAndAttrs$1(oldVnode, vnode) {
     if (isNull(oldVnode)) {
       applyEventListeners(vnode);
       applyStaticClassAttribute(vnode);
@@ -4712,11 +4763,6 @@
     patchProps(oldVnode, vnode);
   }
 
-  function hydrateElmHook(vnode) {
-    applyEventListeners(vnode);
-    patchProps(null, vnode);
-  }
-
   function fallbackElmHook(elm, vnode) {
     var owner = vnode.owner;
     setScopeTokenClassIfNecessary(elm, owner);
@@ -4728,7 +4774,7 @@
       var stylesheetToken = owner.context.stylesheetToken;
 
       if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
-      /* manual */
+      /* Manual */
       ) {
         // this element will now accept any manual content inserted into it
         observeElementChildNodes(elm);
@@ -4742,7 +4788,7 @@
     if (process.env.NODE_ENV !== 'production') {
       var _context = vnode.data.context;
       var isPortal = !isUndefined$1(_context) && !isUndefined$1(_context.lwc) && _context.lwc.dom === "manual"
-      /* manual */
+      /* Manual */
       ;
       var isLight = owner.renderMode === 0
       /* Light */
@@ -4762,7 +4808,7 @@
     }
   }
 
-  function allocateChildrenHook(vnode, vm) {
+  function allocateChildren(vnode, vm) {
     // A component with slots will re-render because:
     // 1- There is a change of the internal state.
     // 2- There is a change on the external api (ex: slots)
@@ -4793,11 +4839,12 @@
   }
 
   function createViewModelHook(elm, vnode) {
-    if (!isUndefined$1(getAssociatedVMIfPresent(elm))) {
-      // There is a possibility that a custom element is registered under tagName,
-      // in which case, the initialization is already carry on, and there is nothing else
-      // to do here since this hook is called right after invoking `document.createElement`.
-      return;
+    var vm = getAssociatedVMIfPresent(elm); // There is a possibility that a custom element is registered under tagName, in which case, the
+    // initialization is already carry on, and there is nothing else to do here since this hook is
+    // called right after invoking `document.createElement`.
+
+    if (!isUndefined$1(vm)) {
+      return vm;
     }
 
     var sel = vnode.sel,
@@ -4815,8 +4862,7 @@
       setElementShadowToken(elm, stylesheetToken);
     }
 
-    var def = getComponentInternalDef(ctor);
-    createVM(elm, def, {
+    vm = createVM(elm, ctor, {
       mode: mode,
       owner: owner,
       tagName: sel
@@ -4825,6 +4871,8 @@
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(isArray$1(vnode.children), "Invalid vnode for a custom element, it must have children defined.");
     }
+
+    return vm;
   }
 
   function createChildrenHook(vnode) {
@@ -4841,177 +4889,12 @@
     }
   }
 
-  function isElementNode(node) {
-    // eslint-disable-next-line lwc-internal/no-global-node
-    return node.nodeType === Node.ELEMENT_NODE;
-  }
-
-  function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
-    var _vnode$data$attrs = vnode.data.attrs,
-        attrs = _vnode$data$attrs === void 0 ? {} : _vnode$data$attrs;
-    var nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
-    // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
-
-    for (var _i14 = 0, _Object$entries = Object.entries(attrs); _i14 < _Object$entries.length; _i14++) {
-      var _Object$entries$_i = _slicedToArray(_Object$entries[_i14], 2),
-          attrName = _Object$entries$_i[0],
-          attrValue = _Object$entries$_i[1];
-
-      var elmAttrValue = getAttribute$1(elm, attrName);
-
-      if (String(attrValue) !== elmAttrValue) {
-        logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
-        nodesAreCompatible = false;
-      }
-    }
-
-    return nodesAreCompatible;
-  }
-
-  function vnodesAndElementHaveCompatibleClass(vnode, elm) {
-    var _vnode$data = vnode.data,
-        className = _vnode$data.className,
-        classMap = _vnode$data.classMap;
-    var nodesAreCompatible = true;
-    var vnodeClassName;
-
-    if (!isUndefined$1(className) && String(className) !== elm.className) {
-      // className is used when class is bound to an expr.
-      nodesAreCompatible = false;
-      vnodeClassName = className;
-    } else if (!isUndefined$1(classMap)) {
-      // classMap is used when class is set to static value.
-      var classList = getClassList$1(elm);
-      var computedClassName = ''; // all classes from the vnode should be in the element.classList
-
-      for (var name in classMap) {
-        computedClassName += ' ' + name;
-
-        if (!classList.contains(name)) {
-          nodesAreCompatible = false;
-        }
-      }
-
-      vnodeClassName = computedClassName.trim();
-
-      if (classList.length > keys(classMap).length) {
-        nodesAreCompatible = false;
-      }
-    }
-
-    if (!nodesAreCompatible) {
-      logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(elm.className, "\""), vnode.owner);
-    }
-
-    return nodesAreCompatible;
-  }
-
-  function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
-    var _vnode$data2 = vnode.data,
-        style = _vnode$data2.style,
-        styleDecls = _vnode$data2.styleDecls;
-    var elmStyle = getAttribute$1(elm, 'style') || '';
-    var vnodeStyle;
-    var nodesAreCompatible = true;
-
-    if (!isUndefined$1(style) && style !== elmStyle) {
-      nodesAreCompatible = false;
-      vnodeStyle = style;
-    } else if (!isUndefined$1(styleDecls)) {
-      var parsedVnodeStyle = parseStyleText(elmStyle);
-      var expectedStyle = []; // styleMap is used when style is set to static value.
-
-      for (var _i15 = 0, n = styleDecls.length; _i15 < n; _i15++) {
-        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i15], 3),
-            prop = _styleDecls$_i2[0],
-            value = _styleDecls$_i2[1],
-            important = _styleDecls$_i2[2];
-
-        expectedStyle.push("".concat(prop, ": ").concat(value + (important ? ' important!' : '')));
-        var parsedPropValue = parsedVnodeStyle[prop];
-
-        if (isUndefined$1(parsedPropValue)) {
-          nodesAreCompatible = false;
-        } else if (!parsedPropValue.startsWith(value)) {
-          nodesAreCompatible = false;
-        } else if (important && !parsedPropValue.endsWith('!important')) {
-          nodesAreCompatible = false;
-        }
-      }
-
-      if (keys(parsedVnodeStyle).length > styleDecls.length) {
-        nodesAreCompatible = false;
-      }
-
-      vnodeStyle = ArrayJoin.call(expectedStyle, ';');
-    }
-
-    if (!nodesAreCompatible) {
-      // style is used when class is bound to an expr.
-      logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
-    }
-
-    return nodesAreCompatible;
-  }
-
-  function throwHydrationError() {
-    assert.fail('Server rendered elements do not match client side generated elements');
-  }
-
-  function hydrateChildrenHook(elmChildren, children, vm) {
-    var _a, _b;
-
-    if (process.env.NODE_ENV !== 'production') {
-      var filteredVNodes = ArrayFilter.call(children, function (vnode) {
-        return !!vnode;
-      });
-
-      if (elmChildren.length !== filteredVNodes.length) {
-        logError("Hydration mismatch: incorrect number of rendered nodes, expected ".concat(filteredVNodes.length, " but found ").concat(elmChildren.length, "."), vm);
-        throwHydrationError();
-      }
-    }
-
-    var elmCurrentChildIdx = 0;
-
-    for (var j = 0, n = children.length; j < n; j++) {
-      var ch = children[j];
-
-      if (ch != null) {
-        var childNode = elmChildren[elmCurrentChildIdx];
-
-        if (process.env.NODE_ENV !== 'production') {
-          // VComments and VTexts validation is handled in their hooks
-          if (isElementNode(childNode)) {
-            if (((_a = ch.sel) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== childNode.tagName.toLowerCase()) {
-              logError("Hydration mismatch: expecting element with tag \"".concat((_b = ch.sel) === null || _b === void 0 ? void 0 : _b.toLowerCase(), "\" but found \"").concat(childNode.tagName.toLowerCase(), "\"."), vm);
-              throwHydrationError();
-            } // Note: props are not yet set
-
-
-            var hasIncompatibleAttrs = vnodesAndElementHaveCompatibleAttrs(ch, childNode);
-            var hasIncompatibleClass = vnodesAndElementHaveCompatibleClass(ch, childNode);
-            var hasIncompatibleStyle = vnodesAndElementHaveCompatibleStyle(ch, childNode);
-            var isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
-
-            if (!isVNodeAndElementCompatible) {
-              throwHydrationError();
-            }
-          }
-        }
-
-        ch.hook.hydrate(ch, childNode);
-        elmCurrentChildIdx++;
-      }
-    }
-  }
-
-  function removeElmHook(vnode) {
-    // this method only needs to search on child vnodes from template
-    // to trigger the remove hook just in case some of those children
-    // are custom elements.
-    var children = vnode.children,
-        elm = vnode.elm;
+  function removeChildren(vnode) {
+    // this method only needs to search on child vnodes from template
+    // to trigger the remove hook just in case some of those children
+    // are custom elements.
+    var children = vnode.children,
+        elm = vnode.elm;
 
     for (var j = 0, _len5 = children.length; j < _len5; ++j) {
       var ch = children[j];
@@ -5023,18 +4906,24 @@
   }
 
   function allocateInSlot(vm, children) {
+    var _a;
+
     var oldSlots = vm.cmpSlots;
     var cmpSlots = vm.cmpSlots = create(null);
 
-    for (var _i16 = 0, _len6 = children.length; _i16 < _len6; _i16 += 1) {
-      var vnode = children[_i16];
+    for (var _i12 = 0, _len6 = children.length; _i12 < _len6; _i12 += 1) {
+      var vnode = children[_i12];
 
       if (isNull(vnode)) {
         continue;
       }
 
-      var data = vnode.data;
-      var slotName = data.attrs && data.attrs.slot || '';
+      var slotName = '';
+
+      if (isVBaseElement(vnode)) {
+        slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
+      }
+
       var vnodes = cmpSlots[slotName] = cmpSlots[slotName] || []; // re-keying the vnodes is necessary to avoid conflicts with default content for the slot
       // which might have similar keys. Each vnode will always have a key that
       // starts with a numeric character from compiler. In this case, we add a unique
@@ -5057,8 +4946,8 @@
         return;
       }
 
-      for (var _i17 = 0, _len7 = oldKeys.length; _i17 < _len7; _i17 += 1) {
-        var key = oldKeys[_i17];
+      for (var _i13 = 0, _len7 = oldKeys.length; _i13 < _len7; _i13 += 1) {
+        var key = oldKeys[_i13];
 
         if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
           markComponentAsDirty(vm);
@@ -5089,325 +4978,202 @@
   function hasDynamicChildren(children) {
     return FromIteration.has(children);
   }
-  /*
-   * 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 getUpgradableConstructor(tagName) {
-    // 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$1(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 (_HTMLElementExported$) {
-      _inherits(LWCUpgradableElement, _HTMLElementExported$);
-
-      var _super5 = _createSuper(LWCUpgradableElement);
-
-      function LWCUpgradableElement(upgradeCallback) {
-        var _this4;
+  function createKeyToOldIdx(children, beginIdx, endIdx) {
+    var map = {}; // TODO [#1637]: simplify this by assuming that all vnodes has keys
 
-        _classCallCheck(this, LWCUpgradableElement);
+    for (var j = beginIdx; j <= endIdx; ++j) {
+      var ch = children[j];
 
-        _this4 = _super5.call(this);
+      if (isVNode(ch)) {
+        var key = ch.key;
 
-        if (isFunction$1(upgradeCallback)) {
-          upgradeCallback(_assertThisInitialized(_this4)); // nothing to do with the result for now
+        if (key !== undefined) {
+          map[key] = j;
         }
-
-        return _this4;
       }
+    }
 
-      return _createClass(LWCUpgradableElement);
-    }(HTMLElementExported$1);
-
-    defineCustomElement$1(tagName, CE);
-    return CE;
+    return map;
   }
-  /*
-   * 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 SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
-  var SymbolIterator = Symbol.iterator;
-  var TextHook = {
-    create: function create(vnode) {
-      var owner = vnode.owner;
-      var elm = createText$1(vnode.text);
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
-    },
-    update: updateNodeHook,
-    insert: insertNodeHook,
-    move: insertNodeHook,
-    remove: removeNodeHook,
-    hydrate: function hydrate(vNode, node) {
-      var _a;
 
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line lwc-internal/no-global-node
-        if (node.nodeType !== Node.TEXT_NODE) {
-          logError('Hydration mismatch: incorrect node type received', vNode.owner);
-          assert.fail('Hydration mismatch: incorrect node type received.');
-        }
+  function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
+    for (; startIdx <= endIdx; ++startIdx) {
+      var ch = vnodes[startIdx];
 
-        if (node.nodeValue !== vNode.text) {
-          logWarn('Hydration mismatch: text values do not match, will recover from the difference', vNode.owner);
-        }
-      } // always set the text value to the one from the vnode.
+      if (isVNode(ch)) {
+        ch.hook.create(ch);
+        ch.hook.insert(ch, parentElm, before);
+      }
+    }
+  }
 
+  function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
+    for (; startIdx <= endIdx; ++startIdx) {
+      var ch = vnodes[startIdx]; // text nodes do not have logic associated to them
 
-      node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
-      vNode.elm = node;
+      if (isVNode(ch)) {
+        ch.hook.remove(ch, parentElm);
+      }
     }
-  };
-  var CommentHook = {
-    create: function create(vnode) {
-      var owner = vnode.owner,
-          text = vnode.text;
-      var elm = createComment$1(text);
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
-    },
-    update: updateNodeHook,
-    insert: insertNodeHook,
-    move: insertNodeHook,
-    remove: removeNodeHook,
-    hydrate: function hydrate(vNode, node) {
-      var _a;
+  }
 
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line lwc-internal/no-global-node
-        if (node.nodeType !== Node.COMMENT_NODE) {
-          logError('Hydration mismatch: incorrect node type received', vNode.owner);
-          assert.fail('Hydration mismatch: incorrect node type received.');
-        }
+  function updateDynamicChildren(parentElm, oldCh, newCh) {
+    var oldStartIdx = 0;
+    var newStartIdx = 0;
+    var oldEndIdx = oldCh.length - 1;
+    var oldStartVnode = oldCh[0];
+    var oldEndVnode = oldCh[oldEndIdx];
+    var newChEnd = newCh.length - 1;
+    var newEndIdx = newChEnd;
+    var newStartVnode = newCh[0];
+    var newEndVnode = newCh[newEndIdx];
+    var oldKeyToIdx;
+    var idxInOld;
+    var elmToMove;
+    var before;
 
-        if (node.nodeValue !== vNode.text) {
-          logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vNode.owner);
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+      if (!isVNode(oldStartVnode)) {
+        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
+      } else if (!isVNode(oldEndVnode)) {
+        oldEndVnode = oldCh[--oldEndIdx];
+      } else if (!isVNode(newStartVnode)) {
+        newStartVnode = newCh[++newStartIdx];
+      } else if (!isVNode(newEndVnode)) {
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldStartVnode, newStartVnode)) {
+        patchVnode(oldStartVnode, newStartVnode);
+        oldStartVnode = oldCh[++oldStartIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else if (isSameVnode(oldEndVnode, newEndVnode)) {
+        patchVnode(oldEndVnode, newEndVnode);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldStartVnode, newEndVnode)) {
+        // Vnode moved right
+        patchVnode(oldStartVnode, newEndVnode);
+        newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling$1(oldEndVnode.elm));
+        oldStartVnode = oldCh[++oldStartIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldEndVnode, newStartVnode)) {
+        // Vnode moved left
+        patchVnode(oldEndVnode, newStartVnode);
+        newStartVnode.hook.move(oldEndVnode, parentElm, oldStartVnode.elm);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        if (oldKeyToIdx === undefined) {
+          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
         }
-      } // always set the text value to the one from the vnode.
 
+        idxInOld = oldKeyToIdx[newStartVnode.key];
 
-      node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
-      vNode.elm = node;
-    }
-  }; // insert is called after update, which is used somewhere else (via a module)
-  // to mark the vm as inserted, that means we cannot use update as the main channel
-  // to rehydrate when dirty, because sometimes the element is not inserted just yet,
-  // which breaks some invariants. For that reason, we have the following for any
-  // Custom Element that is inserted via a template.
+        if (isUndefined$1(idxInOld)) {
+          // New element
+          newStartVnode.hook.create(newStartVnode);
+          newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+          newStartVnode = newCh[++newStartIdx];
+        } else {
+          elmToMove = oldCh[idxInOld];
 
-  var ElementHook = {
-    create: function create(vnode) {
-      var sel = vnode.sel,
-          owner = vnode.owner,
-          svg = vnode.data.svg;
-      var namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-      var elm = createElement$2(sel, namespace);
-      linkNodeToShadow(elm, owner);
-      fallbackElmHook(elm, vnode);
-      vnode.elm = elm;
-      patchElementPropsAndAttrs(null, vnode);
-    },
-    update: function update(oldVnode, vnode) {
-      patchElementPropsAndAttrs(oldVnode, vnode);
-      patchChildren(vnode.elm, oldVnode.children, vnode.children);
-    },
-    insert: function insert(vnode, parentNode, referenceNode) {
-      insertNodeHook(vnode, parentNode, referenceNode);
-      createChildrenHook(vnode);
-    },
-    move: function move(vnode, parentNode, referenceNode) {
-      insertNodeHook(vnode, parentNode, referenceNode);
-    },
-    remove: function remove(vnode, parentNode) {
-      removeNodeHook(vnode, parentNode);
-      removeElmHook(vnode);
-    },
-    hydrate: function hydrate(vnode, node) {
-      var elm = node;
-      vnode.elm = elm;
-      var context = vnode.data.context;
-      var isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
-      /* manual */
-      );
-
-      if (isDomManual) {
-        // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
-        // remove the innerHTML from props so it reuses the existing dom elements.
-        var props = vnode.data.props;
-
-        if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-          if (elm.innerHTML === props.innerHTML) {
-            delete props.innerHTML;
-          } else {
-            logWarn("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), vnode.owner);
+          if (isVNode(elmToMove)) {
+            if (elmToMove.sel !== newStartVnode.sel) {
+              // New element
+              newStartVnode.hook.create(newStartVnode);
+              newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+            } else {
+              patchVnode(elmToMove, newStartVnode);
+              oldCh[idxInOld] = undefined;
+              newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
+            }
           }
-        }
-      }
 
-      hydrateElmHook(vnode);
-
-      if (!isDomManual) {
-        hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
+          newStartVnode = newCh[++newStartIdx];
+        }
       }
     }
-  };
-  var CustomElementHook = {
-    create: function create(vnode) {
-      var sel = vnode.sel,
-          owner = vnode.owner;
-      var UpgradableConstructor = getUpgradableConstructor(sel);
-      /**
-       * 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
-       * mechanism that only passes that argument if the constructor is known to be
-       * an upgradable custom element.
-       */
-
-      var elm = new UpgradableConstructor(function (elm) {
-        // the custom element from the registry is expecting an upgrade callback
-        createViewModelHook(elm, vnode);
-      });
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
-      var vm = getAssociatedVMIfPresent(elm);
-
-      if (vm) {
-        allocateChildrenHook(vnode, vm);
-      } else if (vnode.ctor !== UpgradableConstructor) {
-        throw new TypeError("Incorrect Component Constructor");
-      }
 
-      patchElementPropsAndAttrs(null, vnode);
-    },
-    update: function update(oldVnode, vnode) {
-      patchElementPropsAndAttrs(oldVnode, vnode);
-      var vm = getAssociatedVMIfPresent(vnode.elm);
-
-      if (vm) {
-        // in fallback mode, the allocation will always set children to
-        // empty and delegate the real allocation to the slot elements
-        allocateChildrenHook(vnode, vm);
-      } // in fallback mode, the children will be always empty, so, nothing
-      // will happen, but in native, it does allocate the light dom
-
-
-      patchChildren(vnode.elm, oldVnode.children, vnode.children);
-
-      if (vm) {
-        if (process.env.NODE_ENV !== 'production') {
-          assert.isTrue(isArray$1(vnode.children), "Invalid vnode for a custom element, it must have children defined.");
-        } // this will probably update the shadowRoot, but only if the vm is in a dirty state
-        // this is important to preserve the top to bottom synchronous rendering phase.
+    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+      if (oldStartIdx > oldEndIdx) {
+        // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
+        // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
+        var _i14 = newEndIdx;
+        var n;
 
+        do {
+          n = newCh[++_i14];
+        } while (!isVNode(n) && _i14 < newChEnd);
 
-        rerenderVM(vm);
+        before = isVNode(n) ? n.elm : null;
+        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
+      } else {
+        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
       }
-    },
-    insert: function insert(vnode, parentNode, referenceNode) {
-      insertNodeHook(vnode, parentNode, referenceNode);
-      var vm = getAssociatedVMIfPresent(vnode.elm);
+    }
+  }
 
-      if (vm) {
-        if (process.env.NODE_ENV !== 'production') {
-          assert.isTrue(vm.state === 0
-          /* created */
-          , "".concat(vm, " cannot be recycled."));
-        }
+  function updateStaticChildren(parentElm, oldCh, newCh) {
+    var oldChLength = oldCh.length;
+    var newChLength = newCh.length;
 
-        runConnectedCallback(vm);
-      }
+    if (oldChLength === 0) {
+      // the old list is empty, we can directly insert anything new
+      addVnodes(parentElm, null, newCh, 0, newChLength);
+      return;
+    }
 
-      createChildrenHook(vnode);
+    if (newChLength === 0) {
+      // the old list is nonempty and the new list is empty so we can directly remove all old nodes
+      // this is the case in which the dynamic children of an if-directive should be removed
+      removeVnodes(parentElm, oldCh, 0, oldChLength);
+      return;
+    } // if the old list is not empty, the new list MUST have the same
+    // amount of nodes, that's why we call this static children
 
-      if (vm) {
-        appendVM(vm);
-      }
-    },
-    move: function move(vnode, parentNode, referenceNode) {
-      insertNodeHook(vnode, parentNode, referenceNode);
-    },
-    remove: function remove(vnode, parentNode) {
-      removeNodeHook(vnode, parentNode);
-      var vm = getAssociatedVMIfPresent(vnode.elm);
 
-      if (vm) {
-        // for custom elements we don't have to go recursively because the removeVM routine
-        // will take care of disconnecting any child VM attached to its shadow as well.
-        removeVM(vm);
-      }
-    },
-    hydrate: function hydrate(vnode, elm) {
-      // the element is created, but the vm is not
-      var sel = vnode.sel,
-          mode = vnode.mode,
-          ctor = vnode.ctor,
-          owner = vnode.owner;
-      var def = getComponentInternalDef(ctor);
-      createVM(elm, def, {
-        mode: mode,
-        owner: owner,
-        tagName: sel
-      });
-      vnode.elm = elm;
-      var vm = getAssociatedVM(elm);
-      allocateChildrenHook(vnode, vm);
-      hydrateElmHook(vnode); // Insert hook section:
+    var referenceElm = null;
 
-      if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(vm.state === 0
-        /* created */
-        , "".concat(vm, " cannot be recycled."));
-      }
+    for (var _i15 = newChLength - 1; _i15 >= 0; _i15 -= 1) {
+      var vnode = newCh[_i15];
+      var oldVNode = oldCh[_i15];
 
-      runConnectedCallback(vm);
+      if (vnode !== oldVNode) {
+        if (isVNode(oldVNode)) {
+          if (isVNode(vnode)) {
+            // both vnodes must be equivalent, and se just need to patch them
+            patchVnode(oldVNode, vnode);
+            referenceElm = vnode.elm;
+          } else {
+            // removing the old vnode since the new one is null
+            oldVNode.hook.remove(oldVNode, parentElm);
+          }
+        } else if (isVNode(vnode)) {
+          // this condition is unnecessary
+          vnode.hook.create(vnode); // insert the new node one since the old one is null
 
-      if (vm.renderMode !== 0
-      /* Light */
-      ) {
-        // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
-        // Note: for Light DOM, this is handled while hydrating the VM
-        hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
+          vnode.hook.insert(vnode, parentElm, referenceElm);
+          referenceElm = vnode.elm;
+        }
       }
-
-      hydrateVM(vm);
     }
-  };
-
-  function linkNodeToShadow(elm, owner) {
-    var renderMode = owner.renderMode,
-        shadowMode = owner.shadowMode; // TODO [#1164]: this should eventually be done by the polyfill directly
+  }
 
-    if (isSyntheticShadowDefined$1) {
-      if (shadowMode === 1
-      /* Synthetic */
-      || renderMode === 0
-      /* Light */
-      ) {
-        elm[KEY__SHADOW_RESOLVER] = getRenderRoot(owner)[KEY__SHADOW_RESOLVER];
-      }
+  function patchVnode(oldVnode, vnode) {
+    if (oldVnode !== vnode) {
+      vnode.elm = oldVnode.elm;
+      vnode.hook.update(oldVnode, vnode);
     }
   }
+  /*
+   * 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 SymbolIterator = Symbol.iterator;
 
   function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
@@ -5432,18 +5198,20 @@
 
       forEach.call(children, function (childVnode) {
         if (childVnode != null) {
-          assert.isTrue(childVnode && 'sel' in childVnode && 'data' in childVnode && 'children' in childVnode && 'text' in childVnode && 'elm' in childVnode && 'key' in childVnode, "".concat(childVnode, " is not a vnode."));
+          assert.isTrue('type' in childVnode && 'sel' in childVnode && 'elm' in childVnode && 'key' in childVnode, "".concat(childVnode, " is not a vnode."));
         }
       });
     }
 
-    var text, elm;
+    var elm;
     var key = data.key;
     return {
+      type: 2
+      /* Element */
+      ,
       sel: sel,
       data: data,
       children: children,
-      text: text,
       elm: elm,
       key: key,
       hook: ElementHook,
@@ -5523,19 +5291,21 @@
       if (arguments.length === 4) {
         forEach.call(children, function (childVnode) {
           if (childVnode != null) {
-            assert.isTrue(childVnode && 'sel' in childVnode && 'data' in childVnode && 'children' in childVnode && 'text' in childVnode && 'elm' in childVnode && 'key' in childVnode, "".concat(childVnode, " is not a vnode."));
+            assert.isTrue('type' in childVnode && 'sel' in childVnode && 'elm' in childVnode && 'key' in childVnode, "".concat(childVnode, " is not a vnode."));
           }
         });
       }
     }
 
     var key = data.key;
-    var text, elm;
+    var elm;
     var vnode = {
+      type: 3
+      /* CustomElement */
+      ,
       sel: sel,
       data: data,
       children: children,
-      text: text,
       elm: elm,
       key: key,
       hook: CustomElementHook,
@@ -5660,12 +5430,12 @@
 
 
   function t(text) {
-    var data = EmptyObject;
-    var sel, children, key, elm;
+    var sel, key, elm;
     return {
+      type: 0
+      /* Text */
+      ,
       sel: sel,
-      data: data,
-      children: children,
       text: text,
       elm: elm,
       key: key,
@@ -5676,12 +5446,12 @@
 
 
   function co(text) {
-    var data = EmptyObject;
-    var sel, children, key, elm;
+    var sel, key, elm;
     return {
+      type: 1
+      /* Comment */
+      ,
       sel: sel,
-      data: data,
-      children: children,
       text: text,
       elm: elm,
       key: key,
@@ -5974,8 +5744,8 @@
     var content = [];
     var root;
 
-    for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
-      var stylesheet = stylesheets[_i18];
+    for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
+      var stylesheet = stylesheets[_i16];
 
       if (isArray$1(stylesheet)) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
@@ -6085,8 +5855,8 @@
     && shadowMode === 1
     /* Synthetic */
     ) {
-      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
-        insertGlobalStylesheet$1(stylesheets[_i19]);
+      for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
+        insertGlobalStylesheet$1(stylesheets[_i17]);
       }
     } else if (ssr$1 || isHydrating$1()) {
       // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
@@ -6100,12 +5870,12 @@
       var root = getNearestNativeShadowComponent(vm);
       var isGlobal = isNull(root);
 
-      for (var _i20 = 0; _i20 < stylesheets.length; _i20++) {
+      for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
         if (isGlobal) {
-          insertGlobalStylesheet$1(stylesheets[_i20]);
+          insertGlobalStylesheet$1(stylesheets[_i18]);
         } else {
           // local level
-          insertStylesheet$1(stylesheets[_i20], root.cmpRoot);
+          insertStylesheet$1(stylesheets[_i18], root.shadowRoot);
         }
       }
     }
@@ -6382,8 +6152,8 @@
     var stylesheets = template.stylesheets;
 
     if (!isUndefined$1(stylesheets)) {
-      for (var _i21 = 0; _i21 < stylesheets.length; _i21++) {
-        if (isTrue(stylesheets[_i21][KEY__SCOPED_CSS])) {
+      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
+        if (isTrue(stylesheets[_i19][KEY__SCOPED_CSS])) {
           return true;
         }
       }
@@ -6399,24 +6169,6 @@
    */
 
 
-  function addErrorComponentStack(vm, error) {
-    if (!isFrozen(error) && isUndefined$1(error.wcStack)) {
-      var wcStack = getErrorComponentStack(vm);
-      defineProperty(error, 'wcStack', {
-        get: function get() {
-          return wcStack;
-        }
-      });
-    }
-  }
-  /*
-   * 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 isInvokingRender = false;
   var vmBeingConstructed = null;
 
@@ -6613,8 +6365,8 @@
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
 
-    for (var _i22 = 0; _i22 < hooks.length; ++_i22) {
-      var hookName = hooks[_i22];
+    for (var _i20 = 0; _i20 < hooks.length; ++_i20) {
+      var hookName = hooks[_i20];
 
       if (hookName in service) {
         var l = Services[hookName];
@@ -6637,9 +6389,318 @@
         def = vm.def,
         context = vm.context;
 
-    for (var _i23 = 0, _len8 = cbs.length; _i23 < _len8; ++_i23) {
-      cbs[_i23].call(undefined, component, {}, def, context);
+    for (var _i21 = 0, _len8 = cbs.length; _i21 < _len8; ++_i21) {
+      cbs[_i21].call(undefined, component, {}, def, context);
+    }
+  }
+  /*
+   * Copyright (c) 2022, 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 hydrate$1(vnode, node) {
+    switch (vnode.type) {
+      case 0
+      /* Text */
+      :
+        hydrateText(vnode, node);
+        break;
+
+      case 1
+      /* Comment */
+      :
+        hydrateComment(vnode, node);
+        break;
+
+      case 2
+      /* Element */
+      :
+        hydrateElement(vnode, node);
+        break;
+
+      case 3
+      /* CustomElement */
+      :
+        hydrateCustomElement(vnode, node);
+        break;
+    }
+  }
+
+  function hydrateText(vnode, node) {
+    var _a;
+
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line lwc-internal/no-global-node
+      validateNodeType(vnode, node, Node.TEXT_NODE);
+
+      if (node.nodeValue !== vnode.text && !(node.nodeValue === "\u200D" && vnode.text === '')) {
+        logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
+      }
+    } // always set the text value to the one from the vnode.
+
+
+    node.nodeValue = (_a = vnode.text) !== null && _a !== void 0 ? _a : null;
+    vnode.elm = node;
+  }
+
+  function hydrateComment(vnode, node) {
+    var _a;
+
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line lwc-internal/no-global-node
+      validateNodeType(vnode, node, Node.COMMENT_NODE);
+
+      if (node.nodeValue !== vnode.text) {
+        logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
+      }
+    } // always set the text value to the one from the vnode.
+
+
+    node.nodeValue = (_a = vnode.text) !== null && _a !== void 0 ? _a : null;
+    vnode.elm = node;
+  }
+
+  function hydrateElement(vnode, node) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line lwc-internal/no-global-node
+      validateNodeType(vnode, node, Node.ELEMENT_NODE);
+      validateElement(vnode, node);
+    }
+
+    var elm = node;
+    vnode.elm = elm;
+    var context = vnode.data.context;
+    var isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
+    /* Manual */
+    );
+
+    if (isDomManual) {
+      // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+      // remove the innerHTML from props so it reuses the existing dom elements.
+      var props = vnode.data.props;
+
+      if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
+        if (elm.innerHTML === props.innerHTML) {
+          delete props.innerHTML;
+        } else {
+          logWarn("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), vnode.owner);
+        }
+      }
+    }
+
+    patchElementPropsAndAttrs(vnode);
+
+    if (!isDomManual) {
+      hydrateChildren(vnode.elm.childNodes, vnode.children, vnode.owner);
+    }
+  }
+
+  function hydrateCustomElement(vnode, node) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line lwc-internal/no-global-node
+      validateNodeType(vnode, node, Node.ELEMENT_NODE);
+      validateElement(vnode, node);
+    }
+
+    var elm = node;
+    vnode.elm = elm;
+    var sel = vnode.sel,
+        mode = vnode.mode,
+        ctor = vnode.ctor,
+        owner = vnode.owner;
+    var vm = createVM(elm, ctor, {
+      mode: mode,
+      owner: owner,
+      tagName: sel
+    });
+    allocateChildren(vnode, vm);
+    patchElementPropsAndAttrs(vnode); // Insert hook section:
+
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(vm.state === 0
+      /* created */
+      , "".concat(vm, " cannot be recycled."));
+    }
+
+    runConnectedCallback(vm);
+
+    if (vm.renderMode !== 0
+    /* Light */
+    ) {
+      // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+      // Note: for Light DOM, this is handled while hydrating the VM
+      hydrateChildren(vnode.elm.childNodes, vnode.children, vm);
+    }
+
+    hydrateVM(vm);
+  }
+
+  function hydrateChildren(elmChildren, children, vm) {
+    if (process.env.NODE_ENV !== 'production') {
+      var filteredVNodes = ArrayFilter.call(children, function (vnode) {
+        return !!vnode;
+      });
+
+      if (elmChildren.length !== filteredVNodes.length) {
+        logError("Hydration mismatch: incorrect number of rendered nodes, expected ".concat(filteredVNodes.length, " but found ").concat(elmChildren.length, "."), vm);
+        throwHydrationError();
+      }
+    }
+
+    var childNodeIndex = 0;
+
+    for (var _i22 = 0; _i22 < children.length; _i22++) {
+      var childVnode = children[_i22];
+
+      if (!isNull(childVnode)) {
+        var childNode = elmChildren[childNodeIndex];
+        hydrate$1(childVnode, childNode);
+        childNodeIndex++;
+      }
+    }
+  }
+
+  function patchElementPropsAndAttrs(vnode) {
+    applyEventListeners(vnode);
+    patchProps(null, vnode);
+  }
+
+  function throwHydrationError() {
+    assert.fail('Server rendered elements do not match client side generated elements');
+  }
+
+  function validateNodeType(vnode, node, nodeType) {
+    if (node.nodeType !== nodeType) {
+      logError('Hydration mismatch: incorrect node type received', vnode.owner);
+      assert.fail('Hydration mismatch: incorrect node type received.');
+    }
+  }
+
+  function validateElement(vnode, elm) {
+    if (vnode.sel.toLowerCase() !== elm.tagName.toLowerCase()) {
+      logError("Hydration mismatch: expecting element with tag \"".concat(vnode.sel.toLowerCase(), "\" but found \"").concat(elm.tagName.toLowerCase(), "\"."), vnode.owner);
+      throwHydrationError();
+    }
+
+    var hasIncompatibleAttrs = validateAttrs(vnode, elm);
+    var hasIncompatibleClass = validateClassAttr(vnode, elm);
+    var hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+    var isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+
+    if (!isVNodeAndElementCompatible) {
+      throwHydrationError();
+    }
+  }
+
+  function validateAttrs(vnode, elm) {
+    var _vnode$data$attrs = vnode.data.attrs,
+        attrs = _vnode$data$attrs === void 0 ? {} : _vnode$data$attrs;
+    var nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
+    // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
+
+    for (var _i23 = 0, _Object$entries = Object.entries(attrs); _i23 < _Object$entries.length; _i23++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i23], 2),
+          attrName = _Object$entries$_i[0],
+          attrValue = _Object$entries$_i[1];
+
+      var elmAttrValue = getAttribute$1(elm, attrName);
+
+      if (String(attrValue) !== elmAttrValue) {
+        logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
+        nodesAreCompatible = false;
+      }
+    }
+
+    return nodesAreCompatible;
+  }
+
+  function validateClassAttr(vnode, elm) {
+    var _vnode$data = vnode.data,
+        className = _vnode$data.className,
+        classMap = _vnode$data.classMap;
+    var nodesAreCompatible = true;
+    var vnodeClassName;
+
+    if (!isUndefined$1(className) && String(className) !== elm.className) {
+      // className is used when class is bound to an expr.
+      nodesAreCompatible = false;
+      vnodeClassName = className;
+    } else if (!isUndefined$1(classMap)) {
+      // classMap is used when class is set to static value.
+      var classList = getClassList$1(elm);
+      var computedClassName = ''; // all classes from the vnode should be in the element.classList
+
+      for (var name in classMap) {
+        computedClassName += ' ' + name;
+
+        if (!classList.contains(name)) {
+          nodesAreCompatible = false;
+        }
+      }
+
+      vnodeClassName = computedClassName.trim();
+
+      if (classList.length > keys(classMap).length) {
+        nodesAreCompatible = false;
+      }
+    }
+
+    if (!nodesAreCompatible) {
+      logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(elm.className, "\""), vnode.owner);
+    }
+
+    return nodesAreCompatible;
+  }
+
+  function validateStyleAttr(vnode, elm) {
+    var _vnode$data2 = vnode.data,
+        style = _vnode$data2.style,
+        styleDecls = _vnode$data2.styleDecls;
+    var elmStyle = getAttribute$1(elm, 'style') || '';
+    var vnodeStyle;
+    var nodesAreCompatible = true;
+
+    if (!isUndefined$1(style) && style !== elmStyle) {
+      nodesAreCompatible = false;
+      vnodeStyle = style;
+    } else if (!isUndefined$1(styleDecls)) {
+      var parsedVnodeStyle = parseStyleText(elmStyle);
+      var expectedStyle = []; // styleMap is used when style is set to static value.
+
+      for (var _i24 = 0, n = styleDecls.length; _i24 < n; _i24++) {
+        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i24], 3),
+            prop = _styleDecls$_i2[0],
+            value = _styleDecls$_i2[1],
+            important = _styleDecls$_i2[2];
+
+        expectedStyle.push("".concat(prop, ": ").concat(value + (important ? ' important!' : '')));
+        var parsedPropValue = parsedVnodeStyle[prop];
+
+        if (isUndefined$1(parsedPropValue)) {
+          nodesAreCompatible = false;
+        } else if (!parsedPropValue.startsWith(value)) {
+          nodesAreCompatible = false;
+        } else if (important && !parsedPropValue.endsWith('!important')) {
+          nodesAreCompatible = false;
+        }
+      }
+
+      if (keys(parsedVnodeStyle).length > styleDecls.length) {
+        nodesAreCompatible = false;
+      }
+
+      vnodeStyle = ArrayJoin.call(expectedStyle, ';');
+    }
+
+    if (!nodesAreCompatible) {
+      // style is used when class is bound to an expr.
+      logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
     }
+
+    return nodesAreCompatible;
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6764,10 +6825,11 @@
     return ancestor;
   }
 
-  function createVM(elm, def, options) {
+  function createVM(elm, ctor, options) {
     var mode = options.mode,
         owner = options.owner,
         tagName = options.tagName;
+    var def = getComponentInternalDef(ctor);
     var vm = {
       elm: elm,
       def: def,
@@ -6789,7 +6851,6 @@
       oar: create(null),
       cmpTemplate: null,
       renderMode: def.renderMode,
-      shadowMode: null,
       context: {
         stylesheetToken: undefined,
         hasTokenInClass: undefined,
@@ -6800,9 +6861,13 @@
         wiredConnecting: EmptyArray,
         wiredDisconnecting: EmptyArray
       },
+      // Properties set right after VM creation.
       tro: null,
+      shadowMode: null,
+      // Properties set by the LightningElement constructor.
       component: null,
-      cmpRoot: null,
+      shadowRoot: null,
+      renderRoot: null,
       callHook: callHook,
       setHook: setHook,
       getHook: getHook
@@ -6888,7 +6953,7 @@
   }
 
   function assertIsVM(obj) {
-    if (isNull(obj) || !isObject(obj) || !('cmpRoot' in obj)) {
+    if (isNull(obj) || !isObject(obj) || !('renderRoot' in obj)) {
       throw new TypeError("".concat(obj, " is not a VM."));
     }
   }
@@ -6937,13 +7002,14 @@
       var vmChildren = vm.renderMode === 0
       /* Light */
       ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
-      hydrateChildrenHook(vmChildren, children, vm);
+      hydrateChildren(vmChildren, children, vm);
       runRenderedCallback(vm);
     }
   }
 
   function patchShadowRoot(vm, newCh) {
-    var oldCh = vm.children; // caching the new children collection
+    var renderRoot = vm.renderRoot,
+        oldCh = vm.children; // caching the new children collection
 
     vm.children = newCh;
 
@@ -6958,7 +7024,6 @@
           , vm);
         }, function () {
           // job
-          var renderRoot = getRenderRoot(vm);
           patchChildren(renderRoot, oldCh, newCh);
         }, function () {
           // post
@@ -7020,19 +7085,19 @@
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i24 = 0, _len9 = vms.length; _i24 < _len9; _i24 += 1) {
-      var vm = vms[_i24];
+    for (var _i25 = 0, _len9 = vms.length; _i25 < _len9; _i25 += 1) {
+      var vm = vms[_i25];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i24 + 1 < _len9) {
+        if (_i25 + 1 < _len9) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
 
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i24 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i25 + 1));
         } // we need to end the measure before throwing.
 
 
@@ -7136,8 +7201,8 @@
     var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
 
-    for (var _i25 = vCustomElementCollection.length - 1; _i25 >= 0; _i25 -= 1) {
-      var elm = vCustomElementCollection[_i25].elm; // There are two cases where the element could be undefined:
+    for (var _i26 = vCustomElementCollection.length - 1; _i26 >= 0; _i26 -= 1) {
+      var elm = vCustomElementCollection[_i26].elm; // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
       //   is not properly initialized, and therefore is should be ignored.
@@ -7171,17 +7236,25 @@
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i26 = 0, _len10 = vnodes.length; _i26 < _len10; _i26 += 1) {
-      var vnode = vnodes[_i26];
-
-      if (!isNull(vnode) && isArray$1(vnode.children) && !isUndefined$1(vnode.elm)) {
-        // vnode is a VElement with children
-        if (isUndefined$1(vnode.ctor)) {
-          // it is a VElement, just keep looking (recursively)
-          recursivelyDisconnectChildren(vnode.children);
-        } else {
-          // it is a VCustomElement, disconnect it and ignore its children
-          resetComponentStateWhenRemoved(getAssociatedVM(vnode.elm));
+    for (var _i27 = 0, _len10 = vnodes.length; _i27 < _len10; _i27 += 1) {
+      var vnode = vnodes[_i27];
+
+      if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
+        switch (vnode.type) {
+          case 2
+          /* Element */
+          :
+            recursivelyDisconnectChildren(vnode.children);
+            break;
+
+          case 3
+          /* CustomElement */
+          :
+            {
+              var vm = getAssociatedVM(vnode.elm);
+              resetComponentStateWhenRemoved(vm);
+              break;
+            }
         }
       }
     }
@@ -7192,14 +7265,14 @@
 
 
   function resetComponentRoot(vm) {
-    var children = vm.children;
-    var rootNode = getRenderRoot(vm);
+    var children = vm.children,
+        renderRoot = vm.renderRoot;
 
-    for (var _i27 = 0, _len11 = children.length; _i27 < _len11; _i27++) {
-      var child = children[_i27];
+    for (var _i28 = 0, _len11 = children.length; _i28 < _len11; _i28++) {
+      var child = children[_i28];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
-        remove$1(child.elm, rootNode);
+        remove$1(child.elm, renderRoot);
       }
     }
 
@@ -7287,12 +7360,6 @@
       scheduleRehydration(vm);
     }
   }
-
-  function getRenderRoot(vm) {
-    return vm.renderMode === 1
-    /* Shadow */
-    ? vm.cmpRoot : vm.elm;
-  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -7576,8 +7643,8 @@
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
 
-    for (var _i28 = 0, _len12 = wiredConnecting.length; _i28 < _len12; _i28 += 1) {
-      wiredConnecting[_i28]();
+    for (var _i29 = 0, _len12 = wiredConnecting.length; _i29 < _len12; _i29 += 1) {
+      wiredConnecting[_i29]();
     }
   }
 
@@ -7585,8 +7652,8 @@
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i29 = 0, _len13 = wiredDisconnecting.length; _i29 < _len13; _i29 += 1) {
-        wiredDisconnecting[_i29]();
+      for (var _i30 = 0, _len13 = wiredDisconnecting.length; _i30 < _len13; _i30 += 1) {
+        wiredDisconnecting[_i30]();
       }
     }, noop);
   }
@@ -7676,7 +7743,7 @@
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.7.3 */
+  /* version: 2.7.4 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7691,8 +7758,8 @@
   if (process.env.NODE_ENV === 'development') {
     // @ts-ignore
     window.__lwcResetGlobalStylesheets = function () {
-      for (var _i30 = 0, _Object$keys = Object.keys(globalStylesheets); _i30 < _Object$keys.length; _i30++) {
-        var key = _Object$keys[_i30];
+      for (var _i31 = 0, _Object$keys = Object.keys(globalStylesheets); _i31 < _Object$keys.length; _i31++) {
+        var key = _Object$keys[_i31];
         delete globalStylesheets[key];
       }
     };
@@ -8150,8 +8217,7 @@
      */
 
     var element = new UpgradableConstructor(function (elm) {
-      var def = getComponentInternalDef(Ctor);
-      createVM(elm, def, {
+      createVM(elm, Ctor, {
         tagName: sel,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
         owner: null
@@ -8191,20 +8257,18 @@
       throw new TypeError("\"hydrateComponent\" expects an object as the third parameter but instead received ".concat(props, "."));
     }
 
-    var def = getComponentInternalDef(Ctor);
-
     try {
       // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
       // and uses the same algo to create the stylesheets as in SSR.
       setIsHydrating(true);
-      createVM(element, def, {
+      createVM(element, Ctor, {
         mode: 'open',
         owner: null,
         tagName: element.tagName.toLowerCase()
       });
 
-      for (var _i31 = 0, _Object$entries2 = Object.entries(props); _i31 < _Object$entries2.length; _i31++) {
-        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i31], 2),
+      for (var _i32 = 0, _Object$entries2 = Object.entries(props); _i32 < _Object$entries2.length; _i32++) {
+        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i32], 2),
             key = _Object$entries2$_i[0],
             value = _Object$entries2$_i[1];
 
@@ -8226,8 +8290,8 @@
         mode: 'open'
       });
 
-      for (var _i32 = 0, _Object$entries3 = Object.entries(props); _i32 < _Object$entries3.length; _i32++) {
-        var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i32], 2),
+      for (var _i33 = 0, _Object$entries3 = Object.entries(props); _i33 < _Object$entries3.length; _i33++) {
+        var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i33], 2),
             _key3 = _Object$entries3$_i[0],
             _value2 = _Object$entries3$_i[1];
 
@@ -8271,9 +8335,9 @@
   }
 
   function buildCustomElementConstructor(Ctor) {
-    var def = getComponentInternalDef(Ctor);
-    return /*#__PURE__*/function (_def$bridge) {
-      _inherits(_class, _def$bridge);
+    var HtmlPrototype = getComponentHtmlPrototype(Ctor);
+    return /*#__PURE__*/function (_HtmlPrototype) {
+      _inherits(_class, _HtmlPrototype);
 
       var _super8 = _createSuper(_class);
 
@@ -8283,7 +8347,7 @@
         _classCallCheck(this, _class);
 
         _this6 = _super8.call(this);
-        createVM(_assertThisInitialized(_this6), def, {
+        createVM(_assertThisInitialized(_this6), Ctor, {
           mode: 'open',
           owner: null,
           tagName: _this6.tagName
@@ -8304,7 +8368,7 @@
       }]);
 
       return _class;
-    }(def.bridge);
+    }(HtmlPrototype);
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8411,7 +8475,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.7.3 */
+  /* version: 2.7.4 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;