lwc 2.7.4 → 2.10.0

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

@@ -303,7 +303,17 @@ function htmlPropertyToAttribute(propName) {
 const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-/** version: 2.7.4 */
+/*
+ * 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
+ */
+// Increment whenever the LWC template compiler changes
+
+const LWC_VERSION = "2.10.0";
+const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
+/** version: 2.10.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -370,7 +380,7 @@ function createAriaPropertyPropertyDescriptor(propName, attrName) {
   };
 }
 
-function patch(propName) {
+function patch$1(propName) {
   // Typescript is inferring the wrong function type for this particular
   // overloaded method: https://github.com/Microsoft/TypeScript/issues/27972
   // @ts-ignore type-mismatch
@@ -392,7 +402,7 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
   const propName = ElementPrototypeAriaPropertyNames[i];
 
   if (detect(propName)) {
-    patch(propName);
+    patch$1(propName);
   }
 }
 /**
@@ -408,14 +418,15 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
 
 
 const features = {
-  ENABLE_REACTIVE_SETTER: null,
-  ENABLE_HMR: null,
-  ENABLE_INNER_OUTER_TEXT_PATCH: null,
+  DISABLE_MIXED_SHADOW_MODE: null,
   ENABLE_ELEMENT_PATCH: null,
   ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
-  ENABLE_NODE_LIST_PATCH: null,
+  ENABLE_HMR: null,
   ENABLE_HTML_COLLECTIONS_PATCH: null,
+  ENABLE_INNER_OUTER_TEXT_PATCH: null,
+  ENABLE_NODE_LIST_PATCH: null,
   ENABLE_NODE_PATCH: null,
+  ENABLE_REACTIVE_SETTER: null,
   ENABLE_WIRE_SYNC_EMIT: null
 };
 
@@ -480,7 +491,7 @@ function setFeatureFlagForTest(name, value) {
     setFeatureFlag(name, value);
   }
 }
-/** version: 2.7.4 */
+/** version: 2.10.0 */
 
 /* proxy-compat-disable */
 
@@ -554,6 +565,33 @@ function parseStyleText(cssText) {
   }
 
   return styleMap;
+} // Make a shallow copy of an object but omit the given key
+
+
+function cloneAndOmitKey(object, keyToOmit) {
+  const result = {};
+
+  for (const key of Object.keys(object)) {
+    if (key !== keyToOmit) {
+      result[key] = object[key];
+    }
+  }
+
+  return result;
+}
+
+function flattenStylesheets(stylesheets) {
+  const list = [];
+
+  for (const stylesheet of stylesheets) {
+    if (!Array.isArray(stylesheet)) {
+      list.push(stylesheet);
+    } else {
+      list.push(...flattenStylesheets(stylesheet));
+    }
+  }
+
+  return list;
 } //
 // Primitives
 //
@@ -3359,6 +3397,47 @@ function getDecoratorsMeta(Ctor) {
   const meta = signedDecoratorToMetaMap.get(Ctor);
   return isUndefined$1(meta) ? defaultMeta : meta;
 }
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+
+let warned = false;
+
+if (process.env.NODE_ENV === 'development') {
+  // @ts-ignore
+  window.__lwcResetWarnedOnVersionMismatch = () => {
+    warned = false;
+  };
+}
+
+function checkVersionMismatch(func, type) {
+  const versionMatcher = func.toString().match(LWC_VERSION_COMMENT_REGEX);
+
+  if (!isNull(versionMatcher) && !warned) {
+    const version = versionMatcher[1];
+    const [major, minor] = version.split('.');
+    const [expectedMajor, expectedMinor] = LWC_VERSION.split('.');
+
+    if (major !== expectedMajor || minor !== expectedMinor) {
+      warned = true; // only warn once to avoid flooding the console
+      // stylesheets and templates do not have user-meaningful names, but components do
+
+      const friendlyName = type === 'component' ? `${type} ${func.name}` : type;
+      logError(`LWC WARNING: current engine is v${LWC_VERSION}, but ${friendlyName} was compiled with v${version}.\nPlease update your compiled code or LWC engine so that the versions match.\nNo further warnings will appear.`);
+    }
+  }
+}
+/*
+ * 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 signedTemplateSet = new Set();
 
@@ -3371,6 +3450,16 @@ signedTemplateSet.add(defaultEmptyTemplate);
 function isTemplateRegistered(tpl) {
   return signedTemplateSet.has(tpl);
 }
+
+function checkTemplateVersionMismatch(template) {
+  checkVersionMismatch(template, 'template');
+
+  if (!isUndefined$1(template.stylesheets)) {
+    for (const stylesheet of flattenStylesheets(template.stylesheets)) {
+      checkVersionMismatch(stylesheet, 'stylesheet');
+    }
+  }
+}
 /**
  * INTERNAL: This function can only be invoked by compiled code. The compiler
  * will prevent this function from being imported by userland code.
@@ -3378,6 +3467,10 @@ function isTemplateRegistered(tpl) {
 
 
 function registerTemplate(tpl) {
+  if (process.env.NODE_ENV !== 'production') {
+    checkTemplateVersionMismatch(tpl);
+  }
+
   signedTemplateSet.add(tpl); // chaining this method as a way to wrap existing
   // assignment of templates easily, without too much transformation
 
@@ -3673,20 +3766,6 @@ function rehydrateHotComponent(Ctor) {
   return canRefreshAllInstances;
 }
 
-function flattenStylesheets(stylesheets) {
-  const list = [];
-
-  for (const stylesheet of stylesheets) {
-    if (!Array.isArray(stylesheet)) {
-      list.push(stylesheet);
-    } else {
-      list.push(...flattenStylesheets(stylesheet));
-    }
-  }
-
-  return list;
-}
-
 function getTemplateOrSwappedTemplate(tpl) {
   if (process.env.NODE_ENV === 'production') {
     // this method should never leak to prod
@@ -4517,156 +4596,268 @@ function applyStaticStyleAttribute(vnode) {
  */
 
 
-const TextHook = {
-  create: vnode => {
-    const {
-      owner
-    } = vnode;
-    const elm = createText$1(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$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.
-
-const ElementHook = {
-  create: vnode => {
-    const {
-      sel,
-      owner,
-      data: {
-        svg
-      }
-    } = vnode;
-    const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = createElement$2(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);
+function patchChildren(c1, c2, parent) {
+  if (hasDynamicChildren(c2)) {
+    updateDynamicChildren(c1, c2, parent);
+  } else {
+    updateStaticChildren(c1, c2, parent);
   }
-};
-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`);
+function patch(n1, n2) {
+  if (n1 === n2) {
+    return;
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!isSameVnode(n1, n2)) {
+      throw new Error('Expected these VNodes to be the same: ' + JSON.stringify({
+        sel: n1.sel,
+        key: n1.key
+      }) + ', ' + JSON.stringify({
+        sel: n2.sel,
+        key: n2.key
+      }));
     }
+  }
 
-    patchElementPropsAndAttrs$1(null, vnode);
-  },
-  update: (oldVnode, vnode) => {
-    patchElementPropsAndAttrs$1(oldVnode, vnode);
-    const vm = getAssociatedVMIfPresent(vnode.elm);
+  switch (n2.type) {
+    case 0
+    /* Text */
+    :
+      patchText(n1, n2);
+      break;
+
+    case 1
+    /* Comment */
+    :
+      patchComment(n1, n2);
+      break;
+
+    case 2
+    /* Element */
+    :
+      patchElement(n1, n2);
+      break;
+
+    case 3
+    /* CustomElement */
+    :
+      patchCustomElement(n1, n2);
+      break;
+  }
+}
 
-    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
+function mount(node, parent, anchor) {
+  switch (node.type) {
+    case 0
+    /* Text */
+    :
+      mountText(node, parent, anchor);
+      break;
 
+    case 1
+    /* Comment */
+    :
+      mountComment(node, parent, anchor);
+      break;
 
-    patchChildren(vnode.elm, oldVnode.children, vnode.children);
+    case 2
+    /* Element */
+    :
+      mountElement(node, parent, anchor);
+      break;
 
-    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.
+    case 3
+    /* CustomElement */
+    :
+      mountCustomElement(node, parent, anchor);
+      break;
+  }
+}
+
+function patchText(n1, n2) {
+  n2.elm = n1.elm;
+
+  if (n2.text !== n1.text) {
+    updateTextContent(n2);
+  }
+}
+
+function mountText(node, parent, anchor) {
+  const {
+    owner
+  } = node;
+  const textNode = node.elm = createText$1(node.text);
+  linkNodeToShadow(textNode, owner);
+  insertNode(textNode, parent, anchor);
+}
+
+function patchComment(n1, n2) {
+  n2.elm = n1.elm; // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
+  // it is the case today.
+
+  if (n2.text !== n1.text) {
+    updateTextContent(n2);
+  }
+}
 
+function mountComment(node, parent, anchor) {
+  const {
+    owner
+  } = node;
+  const commentNode = node.elm = createComment$1(node.text);
+  linkNodeToShadow(commentNode, owner);
+  insertNode(commentNode, parent, anchor);
+}
 
-      rerenderVM(vm);
+function mountElement(vnode, parent, anchor) {
+  const {
+    sel,
+    owner,
+    data: {
+      svg
     }
-  },
-  insert: (vnode, parentNode, referenceNode) => {
-    insertNode(vnode, parentNode, referenceNode);
-    const vm = getAssociatedVMIfPresent(vnode.elm);
+  } = vnode;
+  const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
+  const elm = createElement$2(sel, namespace);
+  linkNodeToShadow(elm, owner);
+  fallbackElmHook(elm, vnode);
+  vnode.elm = elm;
+  patchElementPropsAndAttrs$1(null, vnode);
+  insertNode(elm, parent, anchor);
+  mountVNodes(vnode.children, elm, null);
+}
 
-    if (vm) {
-      if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(vm.state === 0
-        /* created */
-        , `${vm} cannot be recycled.`);
-      }
+function patchElement(n1, n2) {
+  const elm = n2.elm = n1.elm;
+  patchElementPropsAndAttrs$1(n1, n2);
+  patchChildren(n1.children, n2.children, elm);
+}
+
+function mountCustomElement(vnode, parent, anchor) {
+  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;
+  vnode.vm = vm;
+
+  if (vm) {
+    allocateChildren(vnode, vm);
+  } else if (vnode.ctor !== UpgradableConstructor) {
+    throw new TypeError(`Incorrect Component Constructor`);
+  }
+
+  patchElementPropsAndAttrs$1(null, vnode);
+  insertNode(elm, parent, anchor);
 
-      runConnectedCallback(vm);
+  if (vm) {
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(vm.state === 0
+      /* created */
+      , `${vm} cannot be recycled.`);
     }
 
-    createChildrenHook(vnode);
+    runConnectedCallback(vm);
+  }
+
+  mountVNodes(vnode.children, elm, null);
+
+  if (vm) {
+    appendVM(vm);
+  }
+}
+
+function patchCustomElement(n1, n2) {
+  const elm = n2.elm = n1.elm;
+  const vm = n2.vm = n1.vm;
+  patchElementPropsAndAttrs$1(n1, n2);
+
+  if (!isUndefined$1(vm)) {
+    // in fallback mode, the allocation will always set children to
+    // empty and delegate the real allocation to the slot elements
+    allocateChildren(n2, vm);
+  } // in fallback mode, the children will be always empty, so, nothing
+  // will happen, but in native, it does allocate the light dom
+
+
+  patchChildren(n1.children, n2.children, elm);
+
+  if (!isUndefined$1(vm)) {
+    // 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);
+  }
+}
+
+function mountVNodes(vnodes, parent, anchor, start = 0, end = vnodes.length) {
+  for (; start < end; ++start) {
+    const vnode = vnodes[start];
 
-    if (vm) {
-      appendVM(vm);
+    if (isVNode(vnode)) {
+      mount(vnode, parent, anchor);
     }
-  },
-  move: insertNode,
-  remove: (vnode, parentNode) => {
-    removeNode(vnode, parentNode);
-    const vm = getAssociatedVMIfPresent(vnode.elm);
+  }
+}
+
+function unmount(vnode, parent, doRemove = false) {
+  const {
+    type,
+    elm
+  } = vnode; // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
+  // subtree root, is the only element worth unmounting from the subtree.
+
+  if (doRemove) {
+    removeNode(elm, parent);
+  }
+
+  switch (type) {
+    case 2
+    /* Element */
+    :
+      unmountVNodes(vnode.children, elm);
+      break;
+
+    case 3
+    /* CustomElement */
+    :
+      {
+        const {
+          vm
+        } = vnode; // No need to unmount the children here, `removeVM` will take care of removing the
+        // children.
+
+        if (!isUndefined$1(vm)) {
+          removeVM(vm);
+        }
+      }
+  }
+}
+
+function unmountVNodes(vnodes, parent, doRemove = false, start = 0, end = vnodes.length) {
+  for (; start < end; ++start) {
+    const ch = vnodes[start];
 
-    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);
+    if (isVNode(ch)) {
+      unmount(ch, parent, doRemove);
     }
   }
-};
+}
 
 function isVNode(vnode) {
   return vnode != null;
@@ -4711,43 +4902,41 @@ function linkNodeToShadow(elm, owner) {
   }
 }
 
-function updateNodeHook(oldVnode, vnode) {
+function updateTextContent(vnode) {
   const {
     elm,
     text
   } = vnode;
 
-  if (oldVnode.text !== text) {
-    if (process.env.NODE_ENV !== 'production') {
-      unlockDomMutation();
-    }
+  if (process.env.NODE_ENV !== 'production') {
+    unlockDomMutation();
+  }
 
-    setText$1(elm, text);
+  setText$1(elm, text);
 
-    if (process.env.NODE_ENV !== 'production') {
-      lockDomMutation();
-    }
+  if (process.env.NODE_ENV !== 'production') {
+    lockDomMutation();
   }
 }
 
-function insertNode(vnode, parentNode, referenceNode) {
+function insertNode(node, parent, anchor) {
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
 
-  insert$1(vnode.elm, parentNode, referenceNode);
+  insert$1(node, parent, anchor);
 
   if (process.env.NODE_ENV !== 'production') {
     lockDomMutation();
   }
 }
 
-function removeNode(vnode, parentNode) {
+function removeNode(node, parent) {
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
 
-  remove$1(vnode.elm, parentNode);
+  remove$1(node, parent);
 
   if (process.env.NODE_ENV !== 'production') {
     lockDomMutation();
@@ -4792,11 +4981,13 @@ function fallbackElmHook(elm, vnode) {
     ) {
       // this element will now accept any manual content inserted into it
       observeElementChildNodes(elm);
-    } // when running in synthetic shadow mode, we need to set the shadowToken value
-    // into each element from the template, so they can be styled accordingly.
-
+    }
 
-    setElementShadowToken(elm, stylesheetToken);
+    if (!isUndefined$1(stylesheetToken)) {
+      // when running in synthetic shadow mode, we need to set the shadowToken value
+      // into each element from the template, so they can be styled accordingly.
+      setElementShadowToken(elm, stylesheetToken);
+    }
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4818,14 +5009,6 @@ function fallbackElmHook(elm, vnode) {
   }
 }
 
-function patchChildren(parent, oldCh, newCh) {
-  if (hasDynamicChildren(newCh)) {
-    updateDynamicChildren(parent, oldCh, newCh);
-  } else {
-    updateStaticChildren(parent, oldCh, newCh);
-  }
-}
-
 function allocateChildren(vnode, vm) {
   // A component with slots will re-render because:
   // 1- There is a change of the internal state.
@@ -4883,7 +5066,9 @@ function createViewModelHook(elm, vnode) {
     } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
     // into each element from the template, so they can be styled accordingly.
 
-    setElementShadowToken(elm, stylesheetToken);
+    if (!isUndefined$1(stylesheetToken)) {
+      setElementShadowToken(elm, stylesheetToken);
+    }
   }
 
   vm = createVM(elm, ctor, {
@@ -4899,40 +5084,6 @@ function createViewModelHook(elm, vnode) {
   return vm;
 }
 
-function createChildrenHook(vnode) {
-  const {
-    elm,
-    children
-  } = vnode;
-
-  for (let j = 0; j < children.length; ++j) {
-    const ch = children[j];
-
-    if (ch != null) {
-      ch.hook.create(ch);
-      ch.hook.insert(ch, elm, null);
-    }
-  }
-}
-
-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
-  } = vnode;
-
-  for (let j = 0, len = children.length; j < len; ++j) {
-    const ch = children[j];
-
-    if (!isNull(ch)) {
-      ch.hook.remove(ch, elm);
-    }
-  }
-}
-
 function allocateInSlot(vm, children) {
   var _a;
 
@@ -5029,28 +5180,7 @@ function createKeyToOldIdx(children, beginIdx, endIdx) {
   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) {
+function updateDynamicChildren(oldCh, newCh, parent) {
   let oldStartIdx = 0;
   let newStartIdx = 0;
   let oldEndIdx = oldCh.length - 1;
@@ -5064,6 +5194,7 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
   let idxInOld;
   let elmToMove;
   let before;
+  let clonedOldCh = false;
 
   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
     if (!isVNode(oldStartVnode)) {
@@ -5075,23 +5206,23 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
     } else if (!isVNode(newEndVnode)) {
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldStartVnode, newStartVnode)) {
-      patchVnode(oldStartVnode, newStartVnode);
+      patch(oldStartVnode, newStartVnode);
       oldStartVnode = oldCh[++oldStartIdx];
       newStartVnode = newCh[++newStartIdx];
     } else if (isSameVnode(oldEndVnode, newEndVnode)) {
-      patchVnode(oldEndVnode, newEndVnode);
+      patch(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));
+      patch(oldStartVnode, newEndVnode);
+      insertNode(oldStartVnode.elm, parent, 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);
+      patch(oldEndVnode, newStartVnode);
+      insertNode(newStartVnode.elm, parent, oldStartVnode.elm);
       oldEndVnode = oldCh[--oldEndIdx];
       newStartVnode = newCh[++newStartIdx];
     } else {
@@ -5103,8 +5234,7 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
 
       if (isUndefined$1(idxInOld)) {
         // New element
-        newStartVnode.hook.create(newStartVnode);
-        newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+        mount(newStartVnode, parent, oldStartVnode.elm);
         newStartVnode = newCh[++newStartIdx];
       } else {
         elmToMove = oldCh[idxInOld];
@@ -5112,12 +5242,22 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
         if (isVNode(elmToMove)) {
           if (elmToMove.sel !== newStartVnode.sel) {
             // New element
-            newStartVnode.hook.create(newStartVnode);
-            newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+            mount(newStartVnode, parent, oldStartVnode.elm);
           } else {
-            patchVnode(elmToMove, newStartVnode);
+            patch(elmToMove, newStartVnode); // Delete the old child, but copy the array since it is read-only.
+            // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
+            // so we only care about the `oldCh` object inside this function.
+            // To avoid cloning over and over again, we check `clonedOldCh`
+            // and only clone once.
+
+            if (!clonedOldCh) {
+              clonedOldCh = true;
+              oldCh = [...oldCh];
+            } // We've already cloned at least once, so it's no longer read-only
+
+
             oldCh[idxInOld] = undefined;
-            newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
+            insertNode(elmToMove.elm, parent, oldStartVnode.elm);
           }
         }
 
@@ -5138,65 +5278,55 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
       } while (!isVNode(n) && i < newChEnd);
 
       before = isVNode(n) ? n.elm : null;
-      addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
+      mountVNodes(newCh, parent, before, newStartIdx, newEndIdx + 1);
     } else {
-      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
+      unmountVNodes(oldCh, parent, true, oldStartIdx, oldEndIdx + 1);
     }
   }
 }
 
-function updateStaticChildren(parentElm, oldCh, newCh) {
-  const oldChLength = oldCh.length;
-  const newChLength = newCh.length;
+function updateStaticChildren(c1, c2, parent) {
+  const c1Length = c1.length;
+  const c2Length = c2.length;
 
-  if (oldChLength === 0) {
+  if (c1Length === 0) {
     // the old list is empty, we can directly insert anything new
-    addVnodes(parentElm, null, newCh, 0, newChLength);
+    mountVNodes(c2, parent, null);
     return;
   }
 
-  if (newChLength === 0) {
+  if (c2Length === 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);
+    unmountVNodes(c1, parent, true);
     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;
+  let anchor = null;
 
-  for (let i = newChLength - 1; i >= 0; i -= 1) {
-    const vnode = newCh[i];
-    const oldVNode = oldCh[i];
+  for (let i = c2Length - 1; i >= 0; i -= 1) {
+    const n1 = c1[i];
+    const n2 = c2[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;
+    if (n2 !== n1) {
+      if (isVNode(n1)) {
+        if (isVNode(n2)) {
+          // both vnodes are equivalent, and we just need to patch them
+          patch(n1, n2);
+          anchor = n2.elm;
         } else {
           // removing the old vnode since the new one is null
-          oldVNode.hook.remove(oldVNode, parentElm);
+          unmount(n1, parent, true);
         }
-      } 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;
+      } else if (isVNode(n2)) {
+        mount(n2, parent, anchor);
+        anchor = n2.elm;
       }
     }
   }
 }
-
-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.
@@ -5212,7 +5342,7 @@ function addVNodeToChildLWC(vnode) {
 } // [h]tml node
 
 
-function h(sel, data, children) {
+function h(sel, data, children = EmptyArray) {
   const vmBeingRendered = getVMBeingRendered();
 
   if (process.env.NODE_ENV !== 'production') {
@@ -5248,7 +5378,6 @@ function h(sel, data, children) {
     children,
     elm,
     key,
-    hook: ElementHook,
     owner: vmBeingRendered
   };
 } // [t]ab[i]ndex function
@@ -5335,7 +5464,7 @@ function c(sel, Ctor, data, children = EmptyArray) {
   const {
     key
   } = data;
-  let elm;
+  let elm, aChildren, vm;
   const vnode = {
     type: 3
     /* CustomElement */
@@ -5345,11 +5474,11 @@ function c(sel, Ctor, data, children = EmptyArray) {
     children,
     elm,
     key,
-    hook: CustomElementHook,
     ctor: Ctor,
     owner: vmBeingRendered,
-    mode: 'open' // TODO [#1294]: this should be defined in Ctor
-
+    mode: 'open',
+    aChildren,
+    vm
   };
   addVNodeToChildLWC(vnode);
   return vnode;
@@ -5479,7 +5608,6 @@ function t(text) {
     text,
     elm,
     key,
-    hook: TextHook,
     owner: getVMBeingRendered()
   };
 } // [co]mment node
@@ -5495,7 +5623,6 @@ function co(text) {
     text,
     elm,
     key,
-    hook: CommentHook,
     owner: getVMBeingRendered()
   };
 } // [d]ynamic text
@@ -5610,7 +5737,7 @@ let dynamicImportedComponentCounter = 0;
  * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
  */
 
-function dc(sel, Ctor, data, children) {
+function dc(sel, Ctor, data, children = EmptyArray) {
   if (process.env.NODE_ENV !== 'production') {
     assert.isTrue(isString(sel), `dc() 1st argument sel must be a string.`);
     assert.isTrue(isObject(data), `dc() 3nd argument data must be an object.`);
@@ -5634,10 +5761,14 @@ function dc(sel, Ctor, data, children) {
   } // the new vnode key is a mix of idx and compiler key, this is required by the diffing algo
   // to identify different constructors as vnodes with different keys to avoid reusing the
   // element used for previous constructors.
+  // Shallow clone is necessary here becuase VElementData may be shared across VNodes due to
+  // hoisting optimization.
 
 
-  data.key = `dc:${idx}:${data.key}`;
-  return c(sel, Ctor, data, children);
+  const newData = Object.assign(Object.assign({}, data), {
+    key: `dc:${idx}:${data.key}`
+  });
+  return c(sel, Ctor, newData, children);
 }
 /**
  * slow children collection marking mechanism. this API allows the compiler to signal
@@ -5757,12 +5888,14 @@ function updateStylesheetToken(vm, template) {
     hasTokenInAttribute: oldHasTokenInAttribute
   } = context;
 
-  if (oldHasTokenInClass) {
-    getClassList$1(elm).remove(makeHostToken(oldToken));
-  }
+  if (!isUndefined$1(oldToken)) {
+    if (oldHasTokenInClass) {
+      getClassList$1(elm).remove(makeHostToken(oldToken));
+    }
 
-  if (oldHasTokenInAttribute) {
-    removeAttribute$1(elm, makeHostToken(oldToken));
+    if (oldHasTokenInAttribute) {
+      removeAttribute$1(elm, makeHostToken(oldToken));
+    }
   } // Apply the new template styling token to the host element, if the new template has any
   // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
@@ -6356,6 +6489,10 @@ const signedTemplateMap = new Map();
 function registerComponent(Ctor, {
   tmpl
 }) {
+  if (process.env.NODE_ENV !== 'production') {
+    checkVersionMismatch(Ctor, 'component');
+  }
+
   signedTemplateMap.set(Ctor, tmpl); // chaining this method as a way to wrap existing assignment of component constructor easily,
   // without too much transformation
 
@@ -6480,7 +6617,7 @@ function invokeServiceHook(vm, cbs) {
  */
 
 
-function hydrate$1(vnode, node) {
+function hydrate(vnode, node) {
   switch (vnode.type) {
     case 0
     /* Text */
@@ -6512,16 +6649,18 @@ 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);
+    validateNodeType(vnode, node, 3
+    /* TEXT */
+    );
+    const nodeValue = getProperty$1(node, 'nodeValue');
 
-    if (node.nodeValue !== vnode.text && !(node.nodeValue === '\u200D' && vnode.text === '')) {
+    if (nodeValue !== vnode.text && !(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;
+  setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
   vnode.elm = node;
 }
 
@@ -6529,23 +6668,25 @@ 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);
+    validateNodeType(vnode, node, 8
+    /* COMMENT */
+    );
 
-    if (node.nodeValue !== vnode.text) {
+    if (getProperty$1(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;
+  setProperty$1(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);
+    validateNodeType(vnode, node, 1
+    /* ELEMENT */
+    );
     validateElement(vnode, node);
   }
 
@@ -6566,10 +6707,13 @@ function hydrateElement(vnode, node) {
     } = vnode.data;
 
     if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-      if (elm.innerHTML === props.innerHTML) {
-        delete props.innerHTML;
+      if (getProperty$1(elm, 'innerHTML') === props.innerHTML) {
+        // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+        vnode.data = Object.assign(Object.assign({}, vnode.data), {
+          props: cloneAndOmitKey(props, 'innerHTML')
+        });
       } else {
-        logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
+        logWarn(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
       }
     }
   }
@@ -6577,19 +6721,19 @@ function hydrateElement(vnode, node) {
   patchElementPropsAndAttrs(vnode);
 
   if (!isDomManual) {
-    hydrateChildren(vnode.elm.childNodes, vnode.children, vnode.owner);
+    hydrateChildren(getChildNodes$1(vnode.elm), 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);
+    validateNodeType(vnode, node, 1
+    /* ELEMENT */
+    );
     validateElement(vnode, node);
   }
 
   const elm = node;
-  vnode.elm = elm;
   const {
     sel,
     mode,
@@ -6601,6 +6745,8 @@ function hydrateCustomElement(vnode, node) {
     owner,
     tagName: sel
   });
+  vnode.elm = elm;
+  vnode.vm = vm;
   allocateChildren(vnode, vm);
   patchElementPropsAndAttrs(vnode); // Insert hook section:
 
@@ -6617,7 +6763,7 @@ function hydrateCustomElement(vnode, node) {
   ) {
     // 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);
+    hydrateChildren(getChildNodes$1(vnode.elm), vnode.children, vm);
   }
 
   hydrateVM(vm);
@@ -6640,7 +6786,7 @@ function hydrateChildren(elmChildren, children, vm) {
 
     if (!isNull(childVnode)) {
       const childNode = elmChildren[childNodeIndex];
-      hydrate$1(childVnode, childNode);
+      hydrate(childVnode, childNode);
       childNodeIndex++;
     }
   }
@@ -6656,15 +6802,15 @@ function throwHydrationError() {
 }
 
 function validateNodeType(vnode, node, nodeType) {
-  if (node.nodeType !== nodeType) {
+  if (getProperty$1(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 "${vnode.sel.toLowerCase()}" but found "${elm.tagName.toLowerCase()}".`, vnode.owner);
+  if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
+    logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty$1(elm, 'tagName').toLowerCase()}".`, vnode.owner);
     throwHydrationError();
   }
 
@@ -6691,7 +6837,7 @@ function validateAttrs(vnode, elm) {
     const elmAttrValue = getAttribute$1(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);
+      logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
       nodesAreCompatible = false;
     }
   }
@@ -6709,7 +6855,7 @@ function validateClassAttr(vnode, elm) {
   let nodesAreCompatible = true;
   let vnodeClassName;
 
-  if (!isUndefined$1(className) && String(className) !== elm.className) {
+  if (!isUndefined$1(className) && String(className) !== getProperty$1(elm, 'className')) {
     // className is used when class is bound to an expr.
     nodesAreCompatible = false;
     vnodeClassName = className;
@@ -6734,7 +6880,7 @@ function validateClassAttr(vnode, elm) {
   }
 
   if (!nodesAreCompatible) {
-    logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${elm.className}"`, vnode.owner);
+    logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty$1(elm, 'className')}"`, vnode.owner);
   }
 
   return nodesAreCompatible;
@@ -6781,7 +6927,7 @@ function validateStyleAttr(vnode, elm) {
 
   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);
+    logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
   }
 
   return nodesAreCompatible;
@@ -6851,7 +6997,19 @@ function appendVM(vm) {
 }
 
 function hydrateVM(vm) {
-  hydrate(vm);
+  if (isTrue(vm.isDirty)) {
+    // manually diffing/patching here.
+    // This routine is:
+    // patchShadowRoot(vm, children);
+    //  -> addVnodes.
+    const children = renderComponent(vm);
+    vm.children = children;
+    const vmChildren = vm.renderMode === 0
+    /* Light */
+    ? getChildNodes$1(vm.elm) : getChildNodes$1(vm.elm.shadowRoot);
+    hydrateChildren(vmChildren, children, vm);
+    runRenderedCallback(vm);
+  }
 } // just in case the component comes back, with this we guarantee re-rendering it
 // while preventing any attempt to rehydration until after reinsertion.
 
@@ -7002,7 +7160,11 @@ function computeShadowMode(vm) {
       /* Native */
       ;
     } else if (isNativeShadowDefined$1) {
-      if (def.shadowSupportMode === "any"
+      if (runtimeFlags.DISABLE_MIXED_SHADOW_MODE) {
+        shadowMode = 1
+        /* Synthetic */
+        ;
+      } else if (def.shadowSupportMode === "any"
       /* Any */
       ) {
         shadowMode = 0
@@ -7082,22 +7244,6 @@ function rehydrate(vm) {
   }
 }
 
-function hydrate(vm) {
-  if (isTrue(vm.isDirty)) {
-    // manually diffing/patching here.
-    // This routine is:
-    // patchShadowRoot(vm, children);
-    //  -> addVnodes.
-    const children = renderComponent(vm);
-    vm.children = children;
-    const vmChildren = vm.renderMode === 0
-    /* Light */
-    ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
-    hydrateChildren(vmChildren, children, vm);
-    runRenderedCallback(vm);
-  }
-}
-
 function patchShadowRoot(vm, newCh) {
   const {
     renderRoot,
@@ -7117,7 +7263,7 @@ function patchShadowRoot(vm, newCh) {
         , vm);
       }, () => {
         // job
-        patchChildren(renderRoot, oldCh, newCh);
+        patchChildren(oldCh, newCh, renderRoot);
       }, () => {
         // post
         logOperationEnd(2
@@ -7864,7 +8010,7 @@ function setHooks(hooks) {
   hooksAreSet = true;
   setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
 }
-/* version: 2.7.4 */
+/* version: 2.10.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7890,6 +8036,7 @@ const globalStylesheetsParentElement = document.head || document.body || documen
 // See also: https://github.com/whatwg/webidl/issues/1027#issuecomment-934510070
 
 const supportsConstructableStyleSheets = isFunction$1(CSSStyleSheet.prototype.replaceSync) && isArray$1(document.adoptedStyleSheets);
+const supportsMutableAdoptedStyleSheets = supportsConstructableStyleSheets && getOwnPropertyDescriptor$1(document.adoptedStyleSheets, 'length').writable;
 const styleElements = create(null);
 const styleSheets = create(null);
 const nodesToStyleSheets = new WeakMap();
@@ -7933,7 +8080,13 @@ function insertConstructableStyleSheet(content, target) {
   }
 
   if (!target.adoptedStyleSheets.includes(styleSheet)) {
-    target.adoptedStyleSheets = [...target.adoptedStyleSheets, styleSheet];
+    if (supportsMutableAdoptedStyleSheets) {
+      // This is only supported in later versions of Chromium:
+      // https://chromestatus.com/feature/5638996492288000
+      target.adoptedStyleSheets.push(styleSheet);
+    } else {
+      target.adoptedStyleSheets = [...target.adoptedStyleSheets, styleSheet];
+    }
   }
 }
 
@@ -8235,6 +8388,156 @@ setSetProperty(setProperty);
 setSetText(setText);
 setSsr(ssr);
 setAddEventListener(addEventListener);
+/*
+ * 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 resetShadowRootAndLightDom(element, Ctor) {
+  if (element.shadowRoot) {
+    const shadowRoot = element.shadowRoot;
+
+    while (!isNull(shadowRoot.firstChild)) {
+      shadowRoot.removeChild(shadowRoot.firstChild);
+    }
+  }
+
+  if (Ctor.renderMode === 'light') {
+    while (!isNull(element.firstChild)) {
+      element.removeChild(element.firstChild);
+    }
+  }
+}
+
+function createVMWithProps(element, Ctor, props) {
+  createVM(element, Ctor, {
+    mode: 'open',
+    owner: null,
+    tagName: element.tagName.toLowerCase()
+  });
+
+  for (const [key, value] of Object.entries(props)) {
+    element[key] = value;
+  }
+}
+
+function hydrateComponent(element, Ctor, props = {}) {
+  if (!(element instanceof Element)) {
+    throw new TypeError(`"hydrateComponent" expects a valid DOM element as the first parameter but instead received ${element}.`);
+  }
+
+  if (!isFunction$1(Ctor)) {
+    throw new TypeError(`"hydrateComponent" expects a valid component constructor as the second parameter but instead received ${Ctor}.`);
+  }
+
+  if (!isObject(props) || isNull(props)) {
+    throw new TypeError(`"hydrateComponent" expects an object as the third parameter but instead received ${props}.`);
+  }
+
+  if (getAssociatedVMIfPresent(element)) {
+    /* eslint-disable-next-line no-console */
+    console.warn(`"hydrateComponent" expects an element that is not hydrated.`, element);
+    return;
+  }
+
+  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);
+    createVMWithProps(element, Ctor, props);
+    hydrateRootElement(element); // set it back since now we finished hydration.
+
+    setIsHydrating(false);
+  } catch (e) {
+    // Fallback: In case there's an error while hydrating, let's log the error, and replace the element content
+    //           with the client generated DOM.
+
+    /* eslint-disable-next-line no-console */
+    console.error('Recovering from error while hydrating: ', e); // We want to preserve the element, so we need to reset the shadowRoot and light dom.
+
+    resetShadowRootAndLightDom(element, Ctor); // we need to recreate the vm with the hydration flag on, so it re-uses the existing shadowRoot.
+
+    createVMWithProps(element, Ctor, props);
+    setIsHydrating(false);
+    connectRootElement(element);
+  } finally {
+    // in case there's an error during recovery
+    setIsHydrating(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
+ */
+
+/**
+ * This function builds a Web Component class from a LWC constructor so it can be
+ * registered as a new element via customElements.define() at any given time.
+ *
+ * @deprecated since version 1.3.11
+ *
+ * @example
+ * ```
+ * import { buildCustomElementConstructor } from 'lwc';
+ * import Foo from 'ns/foo';
+ * const WC = buildCustomElementConstructor(Foo);
+ * customElements.define('x-foo', WC);
+ * const elm = document.createElement('x-foo');
+ * ```
+ */
+
+
+function deprecatedBuildCustomElementConstructor(Ctor) {
+  if (process.env.NODE_ENV !== 'production') {
+    /* eslint-disable-next-line no-console */
+    console.warn('Deprecated function called: "buildCustomElementConstructor" function is deprecated and it will be removed.' + `Use "${Ctor.name}.CustomElementConstructor" static property of the component constructor to access the corresponding custom element constructor instead.`);
+  }
+
+  return Ctor.CustomElementConstructor;
+} // Note: WeakSet is not supported in IE11, and the polyfill is not performant enough.
+//       This WeakSet usage is valid because this functionality is not meant to run in IE11.
+
+
+const hydratedCustomElements = new WeakSet();
+
+function buildCustomElementConstructor(Ctor) {
+  const HtmlPrototype = getComponentHtmlPrototype(Ctor);
+  return class extends HtmlPrototype {
+    constructor() {
+      super();
+
+      if (this.isConnected) {
+        // this if block is hit when there's already an un-upgraded element in the DOM with the same tag name.
+        hydrateComponent(this, Ctor, {});
+        hydratedCustomElements.add(this);
+      } else {
+        createVM(this, Ctor, {
+          mode: 'open',
+          owner: null,
+          tagName: this.tagName
+        });
+      }
+    }
+
+    connectedCallback() {
+      if (hydratedCustomElements.has(this)) {
+        // This is an un-upgraded element that was hydrated in the constructor.
+        hydratedCustomElements.delete(this);
+      } else {
+        connectRootElement(this);
+      }
+    }
+
+    disconnectedCallback() {
+      disconnectRootElement(this);
+    }
+
+  };
+}
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -8244,6 +8547,7 @@ setAddEventListener(addEventListener);
 // TODO [#2472]: Remove this workaround when appropriate.
 // eslint-disable-next-line lwc-internal/no-global-node
 
+
 const _Node$1 = Node;
 const ConnectingSlot = new WeakMap();
 const DisconnectingSlot = new WeakMap();
@@ -8352,118 +8656,6 @@ function createElement(sel, options) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
-
-function hydrateComponent(element, Ctor, props = {}) {
-  if (!(element instanceof Element)) {
-    throw new TypeError(`"hydrateComponent" expects a valid DOM element as the first parameter but instead received ${element}.`);
-  }
-
-  if (!isFunction$1(Ctor)) {
-    throw new TypeError(`"hydrateComponent" expects a valid component constructor as the second parameter but instead received ${Ctor}.`);
-  }
-
-  if (!isObject(props) || isNull(props)) {
-    throw new TypeError(`"hydrateComponent" expects an object as the third parameter but instead received ${props}.`);
-  }
-
-  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, Ctor, {
-      mode: 'open',
-      owner: null,
-      tagName: element.tagName.toLowerCase()
-    });
-
-    for (const [key, value] of Object.entries(props)) {
-      element[key] = value;
-    }
-
-    hydrateRootElement(element); // set it back since now we finished hydration.
-
-    setIsHydrating(false);
-  } catch (e) {
-    // Fallback: In case there's an error while hydrating, let's log the error, and replace the element with
-    //           the client generated DOM.
-
-    /* eslint-disable-next-line no-console */
-    console.error('Recovering from error while hydrating: ', e);
-    setIsHydrating(false);
-    const newElem = createElement(element.tagName, {
-      is: Ctor,
-      mode: 'open'
-    });
-
-    for (const [key, value] of Object.entries(props)) {
-      newElem[key] = value;
-    }
-
-    element.parentNode.replaceChild(newElem, element);
-  }
-}
-/*
- * 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 function builds a Web Component class from a LWC constructor so it can be
- * registered as a new element via customElements.define() at any given time.
- *
- * @deprecated since version 1.3.11
- *
- * @example
- * ```
- * import { buildCustomElementConstructor } from 'lwc';
- * import Foo from 'ns/foo';
- * const WC = buildCustomElementConstructor(Foo);
- * customElements.define('x-foo', WC);
- * const elm = document.createElement('x-foo');
- * ```
- */
-
-
-function deprecatedBuildCustomElementConstructor(Ctor) {
-  if (process.env.NODE_ENV !== 'production') {
-    /* eslint-disable-next-line no-console */
-    console.warn('Deprecated function called: "buildCustomElementConstructor" function is deprecated and it will be removed.' + `Use "${Ctor.name}.CustomElementConstructor" static property of the component constructor to access the corresponding custom element constructor instead.`);
-  }
-
-  return Ctor.CustomElementConstructor;
-}
-
-function buildCustomElementConstructor(Ctor) {
-  const HtmlPrototype = getComponentHtmlPrototype(Ctor);
-  return class extends HtmlPrototype {
-    constructor() {
-      super();
-      createVM(this, Ctor, {
-        mode: 'open',
-        owner: null,
-        tagName: this.tagName
-      });
-    }
-
-    connectedCallback() {
-      connectRootElement(this);
-    }
-
-    disconnectedCallback() {
-      disconnectRootElement(this);
-    }
-
-  };
-}
-/*
- * 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
- */
-
 /**
  * EXPERIMENTAL: This function provides access to the component constructor, given an HTMLElement.
  * This API is subject to change or being removed.
@@ -8495,30 +8687,31 @@ function getComponentConstructor(elm) {
 
 const _Node = Node;
 /**
- * EXPERIMENTAL: This function detects whether or not a Node is controlled by a LWC template. This
- * API is subject to change or being removed.
+ * EXPERIMENTAL: The purpose of this function is to detect shadowed nodes. THIS API WILL BE REMOVED
+ * ONCE LOCKER V1 IS NO LONGER SUPPORTED.
  */
 
-function isNodeFromTemplate(node) {
+function isNodeShadowed(node) {
   if (isFalse(node instanceof _Node)) {
     return false;
-  } // TODO [#1250]: skipping the shadowRoot instances itself makes no sense, we need to revisit
-  // this with locker
+  } // It's debatable whether shadow root instances should be considered as shadowed, but we keep
+  // this unchanged for legacy reasons (#1250).
 
 
   if (node instanceof ShadowRoot) {
     return false;
   }
 
-  if (isSyntheticShadowDefined) {
-    // TODO [#1252]: old behavior that is still used by some pieces of the platform,
-    // specifically, nodes inserted manually on places where `lwc:dom="manual"` directive is not
-    // used, will be considered global elements.
-    return !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
-  }
+  const rootNode = node.getRootNode(); // Handle the native case. We can return early here because an invariant of LWC is that
+  // synthetic roots cannot be descendants of native roots.
+
+  if (rootNode instanceof ShadowRoot && isFalse(hasOwnProperty$1.call(getPrototypeOf$1(rootNode), 'synthetic'))) {
+    return true;
+  } // TODO [#1252]: Old behavior that is still used by some pieces of the platform. Manually
+  // inserted nodes without the `lwc:dom=manual` directive will be considered as global elements.
+
 
-  const root = node.getRootNode();
-  return root instanceof ShadowRoot;
+  return isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
 }
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -8563,6 +8756,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.7.4 */
+/* version: 2.10.0 */
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };