@lwc/engine-core 2.7.3 → 2.7.4

package/dist/engine-core.cjs.js

@@ -400,6 +400,24 @@ function getErrorComponentStack(vm) {
   return wcStack.reverse().join('\n\t');
 }
 
+/*
+ * 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 addErrorComponentStack(vm, error) {
+  if (!shared.isFrozen(error) && shared.isUndefined(error.wcStack)) {
+    const wcStack = getErrorComponentStack(vm);
+    shared.defineProperty(error, 'wcStack', {
+      get() {
+        return wcStack;
+      }
+
+    });
+  }
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -441,205 +459,10 @@ function logWarn(message, vm) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-
-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) {
-  const map = {};
-  let 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) {
-    const 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) {
-    const 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) {
-  let oldStartIdx = 0;
-  let newStartIdx = 0;
-  let oldEndIdx = oldCh.length - 1;
-  let oldStartVnode = oldCh[0];
-  let oldEndVnode = oldCh[oldEndIdx];
-  const newChEnd = newCh.length - 1;
-  let newEndIdx = newChEnd;
-  let newStartVnode = newCh[0];
-  let newEndVnode = newCh[newEndIdx];
-  let oldKeyToIdx;
-  let idxInOld;
-  let elmToMove;
-  let 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(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.
-      let i = newEndIdx;
-      let n;
-
-      do {
-        n = newCh[++i];
-      } while (!isVNode(n) && i < newChEnd);
-
-      before = isVNode(n) ? n.elm : null;
-      addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
-    } else {
-      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
-    }
-  }
-}
-function updateStaticChildren(parentElm, oldCh, newCh) {
-  const oldChLength = oldCh.length;
-  const 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
-
-
-  let referenceElm = null;
-
-  for (let i = newChLength - 1; i >= 0; i -= 1) {
-    const vnode = newCh[i];
-    const oldVNode = oldCh[i];
-
-    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);
-  }
-}
+// This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
+// to inject at runtime.
+const HTMLElementConstructor = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
+const HTMLElementPrototype = HTMLElementConstructor.prototype;
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -757,6 +580,40 @@ function unlockAttribute(elm, key) {
   controlledAttributeName = key;
 }
 
+/*
+ * 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.
+ */
+
+const HTMLElementOriginalDescriptors = shared.create(null);
+shared.forEach.call(shared.keys(shared.AriaPropNameToAttrNameMap), 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.
+  const descriptor = shared.getPropertyDescriptor(HTMLElementPrototype, propName);
+
+  if (!shared.isUndefined(descriptor)) {
+    HTMLElementOriginalDescriptors[propName] = descriptor;
+  }
+});
+shared.forEach.call(defaultDefHTMLPropertyNames, 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.
+  const descriptor = shared.getPropertyDescriptor(HTMLElementPrototype, propName);
+
+  if (!shared.isUndefined(descriptor)) {
+    HTMLElementOriginalDescriptors[propName] = descriptor;
+  }
+});
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1121,53 +978,8 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
   shared.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
- */
-// This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
-// to inject at runtime.
-const HTMLElementConstructor = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
-const HTMLElementPrototype = HTMLElementConstructor.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.
- */
-
-const HTMLElementOriginalDescriptors = shared.create(null);
-shared.forEach.call(shared.keys(shared.AriaPropNameToAttrNameMap), 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.
-  const descriptor = shared.getPropertyDescriptor(HTMLElementPrototype, propName);
-
-  if (!shared.isUndefined(descriptor)) {
-    HTMLElementOriginalDescriptors[propName] = descriptor;
-  }
-});
-shared.forEach.call(defaultDefHTMLPropertyNames, 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.
-  const descriptor = shared.getPropertyDescriptor(HTMLElementPrototype, propName);
-
-  if (!shared.isUndefined(descriptor)) {
-    HTMLElementOriginalDescriptors[propName] = descriptor;
-  }
-});
-
-/**
- * Copyright (C) 2017 salesforce.com, inc.
+/**
+ * Copyright (C) 2017 salesforce.com, inc.
  */
 const {
   isArray
@@ -2082,7 +1894,9 @@ const LightningElement = function () {
   if (vm.renderMode === 1
   /* Shadow */
   ) {
-    doAttachShadow(vm);
+    vm.renderRoot = doAttachShadow(vm);
+  } else {
+    vm.renderRoot = elm;
   } // Adding extra guard rails in DEV mode.
 
 
@@ -2103,19 +1917,21 @@ function doAttachShadow(vm) {
       ctor
     }
   } = vm;
-  const cmpRoot = attachShadow(elm, {
+  const shadowRoot = attachShadow(elm, {
     [shared.KEY__SYNTHETIC_MODE]: shadowMode === 1
     /* Synthetic */
     ,
     delegatesFocus: Boolean(ctor.delegatesFocus),
     mode
   });
-  vm.cmpRoot = cmpRoot;
-  associateVM(cmpRoot, vm);
+  vm.shadowRoot = shadowRoot;
+  associateVM(shadowRoot, vm);
 
   if (process.env.NODE_ENV !== 'production') {
-    patchShadowRootWithRestrictions(cmpRoot);
+    patchShadowRootWithRestrictions(shadowRoot);
   }
+
+  return shadowRoot;
 }
 
 function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
@@ -2283,7 +2099,7 @@ LightningElement.prototype = {
       }
     }
 
-    return vm.cmpRoot;
+    return vm.shadowRoot;
   },
 
   get shadowRoot() {
@@ -3667,6 +3483,10 @@ function getComponentInternalDef(Ctor) {
 
   return def;
 }
+function getComponentHtmlPrototype(Ctor) {
+  const def = getComponentInternalDef(Ctor);
+  return def.bridge;
+}
 const lightingElementDef = {
   ctor: LightningElement,
   name: LightningElement.name,
@@ -3730,14 +3550,68 @@ function getComponentDef(Ctor) {
   };
 }
 
+/*
+ * 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();
+  let CE = getCustomElement(tagName);
+
+  if (!shared.isUndefined(CE)) {
+    return CE;
+  }
+  /**
+   * LWC Upgradable Element reference to an element that was created
+   * via the scoped registry mechanism, and that is ready to be upgraded.
+   */
+
+
+  CE = class LWCUpgradableElement extends HTMLElementExported {
+    constructor(upgradeCallback) {
+      super();
+
+      if (shared.isFunction(upgradeCallback)) {
+        upgradeCallback(this); // nothing to do with the result for now
+      }
+    }
+
+  };
+  defineCustomElement(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) {
+  const {
+    type
+  } = vnode;
+  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.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const xlinkNS = 'http://www.w3.org/1999/xlink';
-const xmlNS = 'http://www.w3.org/XML/1998/namespace';
 const ColonCharCode = 58;
 function patchAttributes(oldVnode, vnode) {
   const {
@@ -3767,10 +3641,10 @@ function patchAttributes(oldVnode, vnode) {
 
       if (shared.StringCharCodeAt.call(key, 3) === ColonCharCode) {
         // Assume xml namespace
-        setAttribute(elm, key, cur, xmlNS);
+        setAttribute(elm, key, cur, shared.XML_NAMESPACE);
       } else if (shared.StringCharCodeAt.call(key, 5) === ColonCharCode) {
         // Assume xlink namespace
-        setAttribute(elm, key, cur, xlinkNS);
+        setAttribute(elm, key, cur, shared.XLINK_NAMESPACE);
       } else if (shared.isNull(cur) || shared.isUndefined(cur)) {
         removeAttribute(elm, key);
       } else {
@@ -4021,6 +3895,160 @@ function applyStaticStyleAttribute(vnode) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+const TextHook = {
+  create: vnode => {
+    const {
+      owner
+    } = vnode;
+    const elm = createText(vnode.text);
+    linkNodeToShadow(elm, owner);
+    vnode.elm = elm;
+  },
+  update: updateNodeHook,
+  insert: insertNode,
+  move: insertNode,
+  remove: removeNode
+};
+const CommentHook = {
+  create: vnode => {
+    const {
+      owner,
+      text
+    } = vnode;
+    const elm = createComment(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.
+
+const ElementHook = {
+  create: vnode => {
+    const {
+      sel,
+      owner,
+      data: {
+        svg
+      }
+    } = vnode;
+    const namespace = shared.isTrue(svg) ? shared.SVG_NAMESPACE : undefined;
+    const elm = createElement(sel, namespace);
+    linkNodeToShadow(elm, owner);
+    fallbackElmHook(elm, vnode);
+    vnode.elm = elm;
+    patchElementPropsAndAttrs$1(null, vnode);
+  },
+  update: (oldVnode, vnode) => {
+    patchElementPropsAndAttrs$1(oldVnode, vnode);
+    patchChildren(vnode.elm, oldVnode.children, vnode.children);
+  },
+  insert: (vnode, parentNode, referenceNode) => {
+    insertNode(vnode, parentNode, referenceNode);
+    createChildrenHook(vnode);
+  },
+  move: insertNode,
+  remove: (vnode, parentNode) => {
+    removeNode(vnode, parentNode);
+    removeChildren(vnode);
+  }
+};
+const CustomElementHook = {
+  create: vnode => {
+    const {
+      sel,
+      owner
+    } = vnode;
+    const 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.
+     */
+
+    let vm;
+    const elm = new UpgradableConstructor(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: (oldVnode, vnode) => {
+    patchElementPropsAndAttrs$1(oldVnode, vnode);
+    const 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') {
+        shared.assert.isTrue(shared.isArray(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: (vnode, parentNode, referenceNode) => {
+    insertNode(vnode, parentNode, referenceNode);
+    const vm = getAssociatedVMIfPresent(vnode.elm);
+
+    if (vm) {
+      if (process.env.NODE_ENV !== 'production') {
+        shared.assert.isTrue(vm.state === 0
+        /* created */
+        , `${vm} cannot be recycled.`);
+      }
+
+      runConnectedCallback(vm);
+    }
+
+    createChildrenHook(vnode);
+
+    if (vm) {
+      appendVM(vm);
+    }
+  },
+  move: insertNode,
+  remove: (vnode, parentNode) => {
+    removeNode(vnode, parentNode);
+    const 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;
@@ -4043,6 +4071,24 @@ function setScopeTokenClassIfNecessary(elm, owner) {
   }
 }
 
+function linkNodeToShadow(elm, owner) {
+  const {
+    renderRoot,
+    renderMode,
+    shadowMode
+  } = owner; // TODO [#1164]: this should eventually be done by the polyfill directly
+
+  if (isSyntheticShadowDefined) {
+    if (shadowMode === 1
+    /* Synthetic */
+    || renderMode === 0
+    /* Light */
+    ) {
+      elm[shared.KEY__SHADOW_RESOLVER] = renderRoot[shared.KEY__SHADOW_RESOLVER];
+    }
+  }
+}
+
 function updateNodeHook(oldVnode, vnode) {
   const {
     elm,
@@ -4061,7 +4107,8 @@ function updateNodeHook(oldVnode, vnode) {
     }
   }
 }
-function insertNodeHook(vnode, parentNode, referenceNode) {
+
+function insertNode(vnode, parentNode, referenceNode) {
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
@@ -4072,7 +4119,8 @@ function insertNodeHook(vnode, parentNode, referenceNode) {
     lockDomMutation();
   }
 }
-function removeNodeHook(vnode, parentNode) {
+
+function removeNode(vnode, parentNode) {
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
@@ -4083,7 +4131,8 @@ function removeNodeHook(vnode, parentNode) {
     lockDomMutation();
   }
 }
-function patchElementPropsAndAttrs(oldVnode, vnode) {
+
+function patchElementPropsAndAttrs$1(oldVnode, vnode) {
   if (shared.isNull(oldVnode)) {
     applyEventListeners(vnode);
     applyStaticClassAttribute(vnode);
@@ -4097,10 +4146,7 @@ function patchElementPropsAndAttrs(oldVnode, vnode) {
   patchAttributes(oldVnode, vnode);
   patchProps(oldVnode, vnode);
 }
-function hydrateElmHook(vnode) {
-  applyEventListeners(vnode);
-  patchProps(null, vnode);
-}
+
 function fallbackElmHook(elm, vnode) {
   const {
     owner
@@ -4120,7 +4166,7 @@ function fallbackElmHook(elm, vnode) {
     } = owner.context;
 
     if (!shared.isUndefined(context) && !shared.isUndefined(context.lwc) && context.lwc.dom === "manual"
-    /* manual */
+    /* Manual */
     ) {
       // this element will now accept any manual content inserted into it
       observeElementChildNodes(elm);
@@ -4138,7 +4184,7 @@ function fallbackElmHook(elm, vnode) {
       }
     } = vnode;
     const isPortal = !shared.isUndefined(context) && !shared.isUndefined(context.lwc) && context.lwc.dom === "manual"
-    /* manual */
+    /* Manual */
     ;
     const isLight = owner.renderMode === 0
     /* Light */
@@ -4149,6 +4195,7 @@ function fallbackElmHook(elm, vnode) {
     });
   }
 }
+
 function patchChildren(parent, oldCh, newCh) {
   if (hasDynamicChildren(newCh)) {
     updateDynamicChildren(parent, oldCh, newCh);
@@ -4156,7 +4203,7 @@ function patchChildren(parent, oldCh, newCh) {
     updateStaticChildren(parent, oldCh, newCh);
   }
 }
-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)
@@ -4187,12 +4234,14 @@ function allocateChildrenHook(vnode, vm) {
     vnode.children = EmptyArray;
   }
 }
+
 function createViewModelHook(elm, vnode) {
-  if (!shared.isUndefined(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;
+  let 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 (!shared.isUndefined(vm)) {
+    return vm;
   }
 
   const {
@@ -4214,8 +4263,7 @@ function createViewModelHook(elm, vnode) {
     setElementShadowToken(elm, stylesheetToken);
   }
 
-  const def = getComponentInternalDef(ctor);
-  createVM(elm, def, {
+  vm = createVM(elm, ctor, {
     mode,
     owner,
     tagName: sel
@@ -4224,7 +4272,10 @@ function createViewModelHook(elm, vnode) {
   if (process.env.NODE_ENV !== 'production') {
     shared.assert.isTrue(shared.isArray(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
   }
+
+  return vm;
 }
+
 function createChildrenHook(vnode) {
   const {
     elm,
@@ -4241,173 +4292,10 @@ function createChildrenHook(vnode) {
   }
 }
 
-function isElementNode(node) {
-  // eslint-disable-next-line lwc-internal/no-global-node
-  return node.nodeType === Node.ELEMENT_NODE;
-}
-
-function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
-  const {
-    data: {
-      attrs = {}
-    }
-  } = vnode;
-  let 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 (const [attrName, attrValue] of Object.entries(attrs)) {
-    const elmAttrValue = getAttribute(elm, attrName);
-
-    if (String(attrValue) !== elmAttrValue) {
-      logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
-      nodesAreCompatible = false;
-    }
-  }
-
-  return nodesAreCompatible;
-}
-
-function vnodesAndElementHaveCompatibleClass(vnode, elm) {
-  const {
-    data: {
-      className,
-      classMap
-    }
-  } = vnode;
-  let nodesAreCompatible = true;
-  let vnodeClassName;
-
-  if (!shared.isUndefined(className) && String(className) !== elm.className) {
-    // className is used when class is bound to an expr.
-    nodesAreCompatible = false;
-    vnodeClassName = className;
-  } else if (!shared.isUndefined(classMap)) {
-    // classMap is used when class is set to static value.
-    const classList = getClassList(elm);
-    let computedClassName = ''; // all classes from the vnode should be in the element.classList
-
-    for (const name in classMap) {
-      computedClassName += ' ' + name;
-
-      if (!classList.contains(name)) {
-        nodesAreCompatible = false;
-      }
-    }
-
-    vnodeClassName = computedClassName.trim();
-
-    if (classList.length > shared.keys(classMap).length) {
-      nodesAreCompatible = false;
-    }
-  }
-
-  if (!nodesAreCompatible) {
-    logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${elm.className}"`, vnode.owner);
-  }
-
-  return nodesAreCompatible;
-}
-
-function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
-  const {
-    data: {
-      style,
-      styleDecls
-    }
-  } = vnode;
-  const elmStyle = getAttribute(elm, 'style') || '';
-  let vnodeStyle;
-  let nodesAreCompatible = true;
-
-  if (!shared.isUndefined(style) && style !== elmStyle) {
-    nodesAreCompatible = false;
-    vnodeStyle = style;
-  } else if (!shared.isUndefined(styleDecls)) {
-    const parsedVnodeStyle = parseStyleText(elmStyle);
-    const expectedStyle = []; // styleMap is used when style is set to static value.
-
-    for (let i = 0, n = styleDecls.length; i < n; i++) {
-      const [prop, value, important] = styleDecls[i];
-      expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
-      const parsedPropValue = parsedVnodeStyle[prop];
-
-      if (shared.isUndefined(parsedPropValue)) {
-        nodesAreCompatible = false;
-      } else if (!parsedPropValue.startsWith(value)) {
-        nodesAreCompatible = false;
-      } else if (important && !parsedPropValue.endsWith('!important')) {
-        nodesAreCompatible = false;
-      }
-    }
-
-    if (shared.keys(parsedVnodeStyle).length > styleDecls.length) {
-      nodesAreCompatible = false;
-    }
-
-    vnodeStyle = shared.ArrayJoin.call(expectedStyle, ';');
-  }
-
-  if (!nodesAreCompatible) {
-    // style is used when class is bound to an expr.
-    logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
-  }
-
-  return nodesAreCompatible;
-}
-
-function throwHydrationError() {
-  shared.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') {
-    const filteredVNodes = shared.ArrayFilter.call(children, vnode => !!vnode);
-
-    if (elmChildren.length !== filteredVNodes.length) {
-      logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
-      throwHydrationError();
-    }
-  }
-
-  let elmCurrentChildIdx = 0;
-
-  for (let j = 0, n = children.length; j < n; j++) {
-    const ch = children[j];
-
-    if (ch != null) {
-      const 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 "${(_b = ch.sel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}" but found "${childNode.tagName.toLowerCase()}".`, vm);
-            throwHydrationError();
-          } // Note: props are not yet set
-
-
-          const hasIncompatibleAttrs = vnodesAndElementHaveCompatibleAttrs(ch, childNode);
-          const hasIncompatibleClass = vnodesAndElementHaveCompatibleClass(ch, childNode);
-          const hasIncompatibleStyle = vnodesAndElementHaveCompatibleStyle(ch, childNode);
-          const 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.
+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.
   const {
     children,
     elm
@@ -4423,6 +4311,8 @@ function removeElmHook(vnode) {
 }
 
 function allocateInSlot(vm, children) {
+  var _a;
+
   const {
     cmpSlots: oldSlots
   } = vm;
@@ -4435,10 +4325,12 @@ function allocateInSlot(vm, children) {
       continue;
     }
 
-    const {
-      data
-    } = vnode;
-    const slotName = data.attrs && data.attrs.slot || '';
+    let slotName = '';
+
+    if (isVBaseElement(vnode)) {
+      slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
+    }
+
     const 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
@@ -4494,329 +4386,203 @@ 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();
-  let CE = getCustomElement(tagName);
-
-  if (!shared.isUndefined(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.
-   */
+function createKeyToOldIdx(children, beginIdx, endIdx) {
+  const map = {}; // TODO [#1637]: simplify this by assuming that all vnodes has keys
 
+  for (let j = beginIdx; j <= endIdx; ++j) {
+    const ch = children[j];
 
-  CE = class LWCUpgradableElement extends HTMLElementExported {
-    constructor(upgradeCallback) {
-      super();
+    if (isVNode(ch)) {
+      const {
+        key
+      } = ch;
 
-      if (shared.isFunction(upgradeCallback)) {
-        upgradeCallback(this); // nothing to do with the result for now
+      if (key !== undefined) {
+        map[key] = j;
       }
     }
+  }
 
-  };
-  defineCustomElement(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
- */
-const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
-const SymbolIterator = Symbol.iterator;
-const TextHook = {
-  create: vnode => {
-    const {
-      owner
-    } = vnode;
-    const elm = createText(vnode.text);
-    linkNodeToShadow(elm, owner);
-    vnode.elm = elm;
-  },
-  update: updateNodeHook,
-  insert: insertNodeHook,
-  move: insertNodeHook,
-  remove: removeNodeHook,
-  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);
-        shared.assert.fail('Hydration mismatch: incorrect node type received.');
-      }
+function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
+  for (; startIdx <= endIdx; ++startIdx) {
+    const 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) {
+    const 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);
+    }
   }
-};
-const CommentHook = {
-  create: vnode => {
-    const {
-      owner,
-      text
-    } = vnode;
-    const elm = createComment(text);
-    linkNodeToShadow(elm, owner);
-    vnode.elm = elm;
-  },
-  update: updateNodeHook,
-  insert: insertNodeHook,
-  move: insertNodeHook,
-  remove: removeNodeHook,
-  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);
-        shared.assert.fail('Hydration mismatch: incorrect node type received.');
-      }
+function updateDynamicChildren(parentElm, oldCh, newCh) {
+  let oldStartIdx = 0;
+  let newStartIdx = 0;
+  let oldEndIdx = oldCh.length - 1;
+  let oldStartVnode = oldCh[0];
+  let oldEndVnode = oldCh[oldEndIdx];
+  const newChEnd = newCh.length - 1;
+  let newEndIdx = newChEnd;
+  let newStartVnode = newCh[0];
+  let newEndVnode = newCh[newEndIdx];
+  let oldKeyToIdx;
+  let idxInOld;
+  let elmToMove;
+  let 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(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.
-
 
-    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.
-
-const ElementHook = {
-  create: vnode => {
-    const {
-      sel,
-      owner,
-      data: {
-        svg
-      }
-    } = vnode;
-    const namespace = shared.isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = createElement(sel, namespace);
-    linkNodeToShadow(elm, owner);
-    fallbackElmHook(elm, vnode);
-    vnode.elm = elm;
-    patchElementPropsAndAttrs(null, vnode);
-  },
-  update: (oldVnode, vnode) => {
-    patchElementPropsAndAttrs(oldVnode, vnode);
-    patchChildren(vnode.elm, oldVnode.children, vnode.children);
-  },
-  insert: (vnode, parentNode, referenceNode) => {
-    insertNodeHook(vnode, parentNode, referenceNode);
-    createChildrenHook(vnode);
-  },
-  move: (vnode, parentNode, referenceNode) => {
-    insertNodeHook(vnode, parentNode, referenceNode);
-  },
-  remove: (vnode, parentNode) => {
-    removeNodeHook(vnode, parentNode);
-    removeElmHook(vnode);
-  },
-  hydrate: (vnode, node) => {
-    const elm = node;
-    vnode.elm = elm;
-    const {
-      context
-    } = vnode.data;
-    const isDomManual = Boolean(!shared.isUndefined(context) && !shared.isUndefined(context.lwc) && context.lwc.dom === "manual"
-    /* manual */
-    );
+      idxInOld = oldKeyToIdx[newStartVnode.key];
 
-    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.
-      const {
-        props
-      } = vnode.data;
+      if (shared.isUndefined(idxInOld)) {
+        // New element
+        newStartVnode.hook.create(newStartVnode);
+        newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        elmToMove = oldCh[idxInOld];
 
-      if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
-        if (elm.innerHTML === props.innerHTML) {
-          delete props.innerHTML;
-        } else {
-          logWarn(`Mismatch hydrating element <${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];
+      }
     }
   }
-};
-const CustomElementHook = {
-  create: vnode => {
-    const {
-      sel,
-      owner
-    } = vnode;
-    const 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.
-     */
-
-    const elm = new UpgradableConstructor(elm => {
-      // the custom element from the registry is expecting an upgrade callback
-      createViewModelHook(elm, vnode);
-    });
-    linkNodeToShadow(elm, owner);
-    vnode.elm = elm;
-    const vm = getAssociatedVMIfPresent(elm);
-
-    if (vm) {
-      allocateChildrenHook(vnode, vm);
-    } else if (vnode.ctor !== UpgradableConstructor) {
-      throw new TypeError(`Incorrect Component Constructor`);
-    }
-
-    patchElementPropsAndAttrs(null, vnode);
-  },
-  update: (oldVnode, vnode) => {
-    patchElementPropsAndAttrs(oldVnode, vnode);
-    const 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
 
+  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.
+      let i = newEndIdx;
+      let n;
 
-    patchChildren(vnode.elm, oldVnode.children, vnode.children);
-
-    if (vm) {
-      if (process.env.NODE_ENV !== 'production') {
-        shared.assert.isTrue(shared.isArray(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.
-
+      do {
+        n = newCh[++i];
+      } while (!isVNode(n) && i < newChEnd);
 
-      rerenderVM(vm);
+      before = isVNode(n) ? n.elm : null;
+      addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
+    } else {
+      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
     }
-  },
-  insert: (vnode, parentNode, referenceNode) => {
-    insertNodeHook(vnode, parentNode, referenceNode);
-    const vm = getAssociatedVMIfPresent(vnode.elm);
+  }
+}
 
-    if (vm) {
-      if (process.env.NODE_ENV !== 'production') {
-        shared.assert.isTrue(vm.state === 0
-        /* created */
-        , `${vm} cannot be recycled.`);
-      }
+function updateStaticChildren(parentElm, oldCh, newCh) {
+  const oldChLength = oldCh.length;
+  const 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: (vnode, parentNode, referenceNode) => {
-    insertNodeHook(vnode, parentNode, referenceNode);
-  },
-  remove: (vnode, parentNode) => {
-    removeNodeHook(vnode, parentNode);
-    const 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: (vnode, elm) => {
-    // the element is created, but the vm is not
-    const {
-      sel,
-      mode,
-      ctor,
-      owner
-    } = vnode;
-    const def = getComponentInternalDef(ctor);
-    createVM(elm, def, {
-      mode,
-      owner,
-      tagName: sel
-    });
-    vnode.elm = elm;
-    const vm = getAssociatedVM(elm);
-    allocateChildrenHook(vnode, vm);
-    hydrateElmHook(vnode); // Insert hook section:
+  let referenceElm = null;
 
-    if (process.env.NODE_ENV !== 'production') {
-      shared.assert.isTrue(vm.state === 0
-      /* created */
-      , `${vm} cannot be recycled.`);
-    }
+  for (let i = newChLength - 1; i >= 0; i -= 1) {
+    const vnode = newCh[i];
+    const oldVNode = oldCh[i];
 
-    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) {
-  const {
-    renderMode,
-    shadowMode
-  } = owner; // TODO [#1164]: this should eventually be done by the polyfill directly
+}
 
-  if (isSyntheticShadowDefined) {
-    if (shadowMode === 1
-    /* Synthetic */
-    || renderMode === 0
-    /* Light */
-    ) {
-      elm[shared.KEY__SHADOW_RESOLVER] = getRenderRoot(owner)[shared.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
+ */
+const SymbolIterator = Symbol.iterator;
+
 function addVNodeToChildLWC(vnode) {
   shared.ArrayPush.call(getVMBeingRendered().velements, vnode);
 } // [h]tml node
@@ -4840,20 +4606,22 @@ function h(sel, data, children) {
 
     shared.forEach.call(children, childVnode => {
       if (childVnode != null) {
-        shared.assert.isTrue(childVnode && 'sel' in childVnode && 'data' in childVnode && 'children' in childVnode && 'text' in childVnode && 'elm' in childVnode && 'key' in childVnode, `${childVnode} is not a vnode.`);
+        shared.assert.isTrue('type' in childVnode && 'sel' in childVnode && 'elm' in childVnode && 'key' in childVnode, `${childVnode} is not a vnode.`);
       }
     });
   }
 
-  let text, elm;
+  let elm;
   const {
     key
   } = data;
   return {
+    type: 2
+    /* Element */
+    ,
     sel,
     data,
     children,
-    text,
     elm,
     key,
     hook: ElementHook,
@@ -4934,7 +4702,7 @@ function c(sel, Ctor, data, children = EmptyArray) {
     if (arguments.length === 4) {
       shared.forEach.call(children, childVnode => {
         if (childVnode != null) {
-          shared.assert.isTrue(childVnode && 'sel' in childVnode && 'data' in childVnode && 'children' in childVnode && 'text' in childVnode && 'elm' in childVnode && 'key' in childVnode, `${childVnode} is not a vnode.`);
+          shared.assert.isTrue('type' in childVnode && 'sel' in childVnode && 'elm' in childVnode && 'key' in childVnode, `${childVnode} is not a vnode.`);
         }
       });
     }
@@ -4943,12 +4711,14 @@ function c(sel, Ctor, data, children = EmptyArray) {
   const {
     key
   } = data;
-  let text, elm;
+  let elm;
   const vnode = {
+    type: 3
+    /* CustomElement */
+    ,
     sel,
     data,
     children,
-    text,
     elm,
     key,
     hook: CustomElementHook,
@@ -5076,12 +4846,12 @@ function f(items) {
 
 
 function t(text) {
-  const data = EmptyObject;
-  let sel, children, key, elm;
+  let sel, key, elm;
   return {
+    type: 0
+    /* Text */
+    ,
     sel,
-    data,
-    children,
     text,
     elm,
     key,
@@ -5092,12 +4862,12 @@ function t(text) {
 
 
 function co(text) {
-  const data = EmptyObject;
-  let sel, children, key, elm;
+  let sel, key, elm;
   return {
+    type: 1
+    /* Comment */
+    ,
     sel,
-    data,
-    children,
     text,
     elm,
     key,
@@ -5534,7 +5304,7 @@ function createStylesheet(vm, stylesheets) {
         insertGlobalStylesheet(stylesheets[i]);
       } else {
         // local level
-        insertStylesheet(stylesheets[i], root.cmpRoot);
+        insertStylesheet(stylesheets[i], root.shadowRoot);
       }
     }
   }
@@ -5826,24 +5596,6 @@ function computeHasScopedStyles(template) {
   return false;
 }
 
-/*
- * 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 addErrorComponentStack(vm, error) {
-  if (!shared.isFrozen(error) && shared.isUndefined(error.wcStack)) {
-    const wcStack = getErrorComponentStack(vm);
-    shared.defineProperty(error, 'wcStack', {
-      get() {
-        return wcStack;
-      }
-
-    });
-  }
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -6073,6 +5825,320 @@ function invokeServiceHook(vm, cbs) {
   }
 }
 
+/*
+ * 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);
+  }
+
+  const elm = node;
+  vnode.elm = elm;
+  const {
+    context
+  } = vnode.data;
+  const isDomManual = Boolean(!shared.isUndefined(context) && !shared.isUndefined(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.
+    const {
+      props
+    } = vnode.data;
+
+    if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
+      if (elm.innerHTML === props.innerHTML) {
+        delete props.innerHTML;
+      } else {
+        logWarn(`Mismatch hydrating element <${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);
+  }
+
+  const elm = node;
+  vnode.elm = elm;
+  const {
+    sel,
+    mode,
+    ctor,
+    owner
+  } = vnode;
+  const vm = createVM(elm, ctor, {
+    mode,
+    owner,
+    tagName: sel
+  });
+  allocateChildren(vnode, vm);
+  patchElementPropsAndAttrs(vnode); // Insert hook section:
+
+  if (process.env.NODE_ENV !== 'production') {
+    shared.assert.isTrue(vm.state === 0
+    /* created */
+    , `${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') {
+    const filteredVNodes = shared.ArrayFilter.call(children, vnode => !!vnode);
+
+    if (elmChildren.length !== filteredVNodes.length) {
+      logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
+      throwHydrationError();
+    }
+  }
+
+  let childNodeIndex = 0;
+
+  for (let i = 0; i < children.length; i++) {
+    const childVnode = children[i];
+
+    if (!shared.isNull(childVnode)) {
+      const childNode = elmChildren[childNodeIndex];
+      hydrate$1(childVnode, childNode);
+      childNodeIndex++;
+    }
+  }
+}
+
+function patchElementPropsAndAttrs(vnode) {
+  applyEventListeners(vnode);
+  patchProps(null, vnode);
+}
+
+function throwHydrationError() {
+  shared.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);
+    shared.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 "${vnode.sel.toLowerCase()}" but found "${elm.tagName.toLowerCase()}".`, vnode.owner);
+    throwHydrationError();
+  }
+
+  const hasIncompatibleAttrs = validateAttrs(vnode, elm);
+  const hasIncompatibleClass = validateClassAttr(vnode, elm);
+  const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+  const isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+
+  if (!isVNodeAndElementCompatible) {
+    throwHydrationError();
+  }
+}
+
+function validateAttrs(vnode, elm) {
+  const {
+    data: {
+      attrs = {}
+    }
+  } = vnode;
+  let 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 (const [attrName, attrValue] of Object.entries(attrs)) {
+    const elmAttrValue = getAttribute(elm, attrName);
+
+    if (String(attrValue) !== elmAttrValue) {
+      logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
+      nodesAreCompatible = false;
+    }
+  }
+
+  return nodesAreCompatible;
+}
+
+function validateClassAttr(vnode, elm) {
+  const {
+    data: {
+      className,
+      classMap
+    }
+  } = vnode;
+  let nodesAreCompatible = true;
+  let vnodeClassName;
+
+  if (!shared.isUndefined(className) && String(className) !== elm.className) {
+    // className is used when class is bound to an expr.
+    nodesAreCompatible = false;
+    vnodeClassName = className;
+  } else if (!shared.isUndefined(classMap)) {
+    // classMap is used when class is set to static value.
+    const classList = getClassList(elm);
+    let computedClassName = ''; // all classes from the vnode should be in the element.classList
+
+    for (const name in classMap) {
+      computedClassName += ' ' + name;
+
+      if (!classList.contains(name)) {
+        nodesAreCompatible = false;
+      }
+    }
+
+    vnodeClassName = computedClassName.trim();
+
+    if (classList.length > shared.keys(classMap).length) {
+      nodesAreCompatible = false;
+    }
+  }
+
+  if (!nodesAreCompatible) {
+    logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${elm.className}"`, vnode.owner);
+  }
+
+  return nodesAreCompatible;
+}
+
+function validateStyleAttr(vnode, elm) {
+  const {
+    data: {
+      style,
+      styleDecls
+    }
+  } = vnode;
+  const elmStyle = getAttribute(elm, 'style') || '';
+  let vnodeStyle;
+  let nodesAreCompatible = true;
+
+  if (!shared.isUndefined(style) && style !== elmStyle) {
+    nodesAreCompatible = false;
+    vnodeStyle = style;
+  } else if (!shared.isUndefined(styleDecls)) {
+    const parsedVnodeStyle = parseStyleText(elmStyle);
+    const expectedStyle = []; // styleMap is used when style is set to static value.
+
+    for (let i = 0, n = styleDecls.length; i < n; i++) {
+      const [prop, value, important] = styleDecls[i];
+      expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
+      const parsedPropValue = parsedVnodeStyle[prop];
+
+      if (shared.isUndefined(parsedPropValue)) {
+        nodesAreCompatible = false;
+      } else if (!parsedPropValue.startsWith(value)) {
+        nodesAreCompatible = false;
+      } else if (important && !parsedPropValue.endsWith('!important')) {
+        nodesAreCompatible = false;
+      }
+    }
+
+    if (shared.keys(parsedVnodeStyle).length > styleDecls.length) {
+      nodesAreCompatible = false;
+    }
+
+    vnodeStyle = shared.ArrayJoin.call(expectedStyle, ';');
+  }
+
+  if (!nodesAreCompatible) {
+    // style is used when class is bound to an expr.
+    logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
+  }
+
+  return nodesAreCompatible;
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -6191,12 +6257,13 @@ function getNearestShadowAncestor(vm) {
   return ancestor;
 }
 
-function createVM(elm, def, options) {
+function createVM(elm, ctor, options) {
   const {
     mode,
     owner,
     tagName
   } = options;
+  const def = getComponentInternalDef(ctor);
   const vm = {
     elm,
     def,
@@ -6218,7 +6285,6 @@ function createVM(elm, def, options) {
     oar: shared.create(null),
     cmpTemplate: null,
     renderMode: def.renderMode,
-    shadowMode: null,
     context: {
       stylesheetToken: undefined,
       hasTokenInClass: undefined,
@@ -6229,9 +6295,13 @@ function createVM(elm, def, options) {
       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,
     setHook,
     getHook
@@ -6319,7 +6389,7 @@ function computeShadowMode(vm) {
 }
 
 function assertIsVM(obj) {
-  if (shared.isNull(obj) || !shared.isObject(obj) || !('cmpRoot' in obj)) {
+  if (shared.isNull(obj) || !shared.isObject(obj) || !('renderRoot' in obj)) {
     throw new TypeError(`${obj} is not a VM.`);
   }
 }
@@ -6366,13 +6436,14 @@ function hydrate(vm) {
     const 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) {
   const {
+    renderRoot,
     children: oldCh
   } = vm; // caching the new children collection
 
@@ -6389,7 +6460,6 @@ function patchShadowRoot(vm, newCh) {
         , vm);
       }, () => {
         // job
-        const renderRoot = getRenderRoot(vm);
         patchChildren(renderRoot, oldCh, newCh);
       }, () => {
         // post
@@ -6625,14 +6695,22 @@ function recursivelyDisconnectChildren(vnodes) {
   for (let i = 0, len = vnodes.length; i < len; i += 1) {
     const vnode = vnodes[i];
 
-    if (!shared.isNull(vnode) && shared.isArray(vnode.children) && !shared.isUndefined(vnode.elm)) {
-      // vnode is a VElement with children
-      if (shared.isUndefined(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));
+    if (!shared.isNull(vnode) && !shared.isUndefined(vnode.elm)) {
+      switch (vnode.type) {
+        case 2
+        /* Element */
+        :
+          recursivelyDisconnectChildren(vnode.children);
+          break;
+
+        case 3
+        /* CustomElement */
+        :
+          {
+            const vm = getAssociatedVM(vnode.elm);
+            resetComponentStateWhenRemoved(vm);
+            break;
+          }
       }
     }
   }
@@ -6644,15 +6722,15 @@ function recursivelyDisconnectChildren(vnodes) {
 
 function resetComponentRoot(vm) {
   const {
-    children
+    children,
+    renderRoot
   } = vm;
-  const rootNode = getRenderRoot(vm);
 
   for (let i = 0, len = children.length; i < len; i++) {
     const child = children[i];
 
     if (!shared.isNull(child) && !shared.isUndefined(child.elm)) {
-      remove(child.elm, rootNode);
+      remove(child.elm, renderRoot);
     }
   }
 
@@ -6736,11 +6814,6 @@ function forceRehydration(vm) {
     scheduleRehydration(vm);
   }
 }
-function getRenderRoot(vm) {
-  return vm.renderMode === 1
-  /* Shadow */
-  ? vm.cmpRoot : vm.elm;
-}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7138,7 +7211,7 @@ exports.createVM = createVM;
 exports.disconnectRootElement = disconnectRootElement;
 exports.getAssociatedVMIfPresent = getAssociatedVMIfPresent;
 exports.getComponentDef = getComponentDef;
-exports.getComponentInternalDef = getComponentInternalDef;
+exports.getComponentHtmlPrototype = getComponentHtmlPrototype;
 exports.getUpgradableConstructor = getUpgradableConstructor;
 exports.hydrateRootElement = hydrateRootElement;
 exports.isComponentConstructor = isComponentConstructor;
@@ -7195,4 +7268,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.7.3 */
+/* version: 2.7.4 */