lwc 2.7.4 → 2.10.0

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

@@ -309,7 +309,17 @@
   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.
@@ -376,7 +386,7 @@
     };
   }
 
-  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
@@ -398,7 +408,7 @@
     const propName = ElementPrototypeAriaPropertyNames[i];
 
     if (detect(propName)) {
-      patch(propName);
+      patch$1(propName);
     }
   }
   /**
@@ -414,14 +424,15 @@
 
 
   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
   };
 
@@ -486,7 +497,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.7.4 */
+  /** version: 2.10.0 */
 
   /* proxy-compat-disable */
 
@@ -560,6 +571,33 @@
     }
 
     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
   //
@@ -3365,6 +3403,47 @@
     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();
 
@@ -3377,6 +3456,16 @@
   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.
@@ -3384,6 +3473,10 @@
 
 
   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
 
@@ -3679,20 +3772,6 @@
     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
@@ -4523,156 +4602,268 @@
    */
 
 
-  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;
@@ -4717,43 +4908,41 @@
     }
   }
 
-  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();
@@ -4798,11 +4987,13 @@
       ) {
         // 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') {
@@ -4824,14 +5015,6 @@
     }
   }
 
-  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.
@@ -4889,7 +5072,9 @@
       } = 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, {
@@ -4905,40 +5090,6 @@
     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;
 
@@ -5035,28 +5186,7 @@
     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;
@@ -5070,6 +5200,7 @@
     let idxInOld;
     let elmToMove;
     let before;
+    let clonedOldCh = false;
 
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
       if (!isVNode(oldStartVnode)) {
@@ -5081,23 +5212,23 @@
       } 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 {
@@ -5109,8 +5240,7 @@
 
         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];
@@ -5118,12 +5248,22 @@
           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);
             }
           }
 
@@ -5144,65 +5284,55 @@
         } 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.
@@ -5218,7 +5348,7 @@
   } // [h]tml node
 
 
-  function h(sel, data, children) {
+  function h(sel, data, children = EmptyArray) {
     const vmBeingRendered = getVMBeingRendered();
 
     if (process.env.NODE_ENV !== 'production') {
@@ -5254,7 +5384,6 @@
       children,
       elm,
       key,
-      hook: ElementHook,
       owner: vmBeingRendered
     };
   } // [t]ab[i]ndex function
@@ -5341,7 +5470,7 @@
     const {
       key
     } = data;
-    let elm;
+    let elm, aChildren, vm;
     const vnode = {
       type: 3
       /* CustomElement */
@@ -5351,11 +5480,11 @@
       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;
@@ -5485,7 +5614,6 @@
       text,
       elm,
       key,
-      hook: TextHook,
       owner: getVMBeingRendered()
     };
   } // [co]mment node
@@ -5501,7 +5629,6 @@
       text,
       elm,
       key,
-      hook: CommentHook,
       owner: getVMBeingRendered()
     };
   } // [d]ynamic text
@@ -5616,7 +5743,7 @@
    * 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.`);
@@ -5640,10 +5767,14 @@
     } // 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
@@ -5763,12 +5894,14 @@
       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.
 
@@ -6362,6 +6495,10 @@
   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
 
@@ -6486,7 +6623,7 @@
    */
 
 
-  function hydrate$1(vnode, node) {
+  function hydrate(vnode, node) {
     switch (vnode.type) {
       case 0
       /* Text */
@@ -6518,16 +6655,18 @@
     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;
   }
 
@@ -6535,23 +6674,25 @@
     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);
     }
 
@@ -6572,10 +6713,13 @@
       } = 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);
         }
       }
     }
@@ -6583,19 +6727,19 @@
     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,
@@ -6607,6 +6751,8 @@
       owner,
       tagName: sel
     });
+    vnode.elm = elm;
+    vnode.vm = vm;
     allocateChildren(vnode, vm);
     patchElementPropsAndAttrs(vnode); // Insert hook section:
 
@@ -6623,7 +6769,7 @@
     ) {
       // 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);
@@ -6646,7 +6792,7 @@
 
       if (!isNull(childVnode)) {
         const childNode = elmChildren[childNodeIndex];
-        hydrate$1(childVnode, childNode);
+        hydrate(childVnode, childNode);
         childNodeIndex++;
       }
     }
@@ -6662,15 +6808,15 @@
   }
 
   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();
     }
 
@@ -6697,7 +6843,7 @@
       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;
       }
     }
@@ -6715,7 +6861,7 @@
     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;
@@ -6740,7 +6886,7 @@
     }
 
     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;
@@ -6787,7 +6933,7 @@
 
     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;
@@ -6857,7 +7003,19 @@
   }
 
   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.
 
@@ -7008,7 +7166,11 @@
         /* 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
@@ -7088,22 +7250,6 @@
     }
   }
 
-  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,
@@ -7123,7 +7269,7 @@
           , vm);
         }, () => {
           // job
-          patchChildren(renderRoot, oldCh, newCh);
+          patchChildren(oldCh, newCh, renderRoot);
         }, () => {
           // post
           logOperationEnd(2
@@ -7870,7 +8016,7 @@
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.7.4 */
+  /* version: 2.10.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7896,6 +8042,7 @@
   // 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();
@@ -7939,7 +8086,13 @@
     }
 
     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];
+      }
     }
   }
 
@@ -8241,6 +8394,156 @@
   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.
@@ -8250,6 +8553,7 @@
   // 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();
@@ -8358,118 +8662,6 @@
    * 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.
@@ -8501,30 +8693,31 @@
 
   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.
@@ -8569,7 +8762,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.7.4 */
+  /* version: 2.10.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -8581,7 +8774,7 @@
   exports.getComponentDef = getComponentDef;
   exports.hydrateComponent = hydrateComponent;
   exports.isComponentConstructor = isComponentConstructor;
-  exports.isNodeFromTemplate = isNodeFromTemplate;
+  exports.isNodeFromTemplate = isNodeShadowed;
   exports.readonly = readonly;
   exports.register = register;
   exports.registerComponent = registerComponent;