lwc 2.7.3 → 2.7.4

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

@@ -301,7 +301,11 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.7.3 */
+
+  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.
@@ -310,7 +314,6 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-
   function detect(propName) {
     return Object.getOwnPropertyDescriptor(Element.prototype, propName) === undefined;
   }
@@ -471,7 +474,7 @@
 
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.7.3 */
+  /** version: 2.7.4 */
 
   /* proxy-compat-disable */
 
@@ -931,6 +934,25 @@
    */
 
 
+  function addErrorComponentStack(vm, error) {
+    if (!isFrozen(error) && isUndefined$1(error.wcStack)) {
+      const wcStack = getErrorComponentStack(vm);
+      defineProperty(error, 'wcStack', {
+        get() {
+          return wcStack;
+        }
+
+      });
+    }
+  }
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+
   function log(method, message, vm) {
     let msg = `[LWC ${method}]: ${message}`;
 
@@ -955,207 +977,12 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
+  // to inject at runtime.
 
 
-  function isUndef(s) {
-    return s === undefined;
-  }
-
-  function sameVnode(vnode1, vnode2) {
-    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
-  }
-
-  function isVNode(vnode) {
-    return vnode != null;
-  }
-
-  function createKeyToOldIdx(children, beginIdx, endIdx) {
-    const map = {};
-    let j, key, ch; // TODO [#1637]: simplify this by assuming that all vnodes has keys
-
-    for (j = beginIdx; j <= endIdx; ++j) {
-      ch = children[j];
-
-      if (isVNode(ch)) {
-        key = ch.key;
-
-        if (key !== undefined) {
-          map[key] = j;
-        }
-      }
-    }
-
-    return map;
-  }
-
-  function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      const ch = vnodes[startIdx];
-
-      if (isVNode(ch)) {
-        ch.hook.create(ch);
-        ch.hook.insert(ch, parentElm, before);
-      }
-    }
-  }
-
-  function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      const ch = vnodes[startIdx]; // text nodes do not have logic associated to them
-
-      if (isVNode(ch)) {
-        ch.hook.remove(ch, parentElm);
-      }
-    }
-  }
-
-  function updateDynamicChildren(parentElm, oldCh, newCh) {
-    let oldStartIdx = 0;
-    let newStartIdx = 0;
-    let oldEndIdx = oldCh.length - 1;
-    let oldStartVnode = oldCh[0];
-    let oldEndVnode = oldCh[oldEndIdx];
-    const newChEnd = newCh.length - 1;
-    let newEndIdx = newChEnd;
-    let newStartVnode = newCh[0];
-    let newEndVnode = newCh[newEndIdx];
-    let oldKeyToIdx;
-    let idxInOld;
-    let elmToMove;
-    let before;
-
-    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-      if (!isVNode(oldStartVnode)) {
-        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-      } else if (!isVNode(oldEndVnode)) {
-        oldEndVnode = oldCh[--oldEndIdx];
-      } else if (!isVNode(newStartVnode)) {
-        newStartVnode = newCh[++newStartIdx];
-      } else if (!isVNode(newEndVnode)) {
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newStartVnode)) {
-        patchVnode(oldStartVnode, newStartVnode);
-        oldStartVnode = oldCh[++oldStartIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else if (sameVnode(oldEndVnode, newEndVnode)) {
-        patchVnode(oldEndVnode, newEndVnode);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newEndVnode)) {
-        // Vnode moved right
-        patchVnode(oldStartVnode, newEndVnode);
-        newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling$1(oldEndVnode.elm));
-        oldStartVnode = oldCh[++oldStartIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldEndVnode, newStartVnode)) {
-        // Vnode moved left
-        patchVnode(oldEndVnode, newStartVnode);
-        newStartVnode.hook.move(oldEndVnode, parentElm, oldStartVnode.elm);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else {
-        if (oldKeyToIdx === undefined) {
-          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-        }
-
-        idxInOld = oldKeyToIdx[newStartVnode.key];
-
-        if (isUndef(idxInOld)) {
-          // New element
-          newStartVnode.hook.create(newStartVnode);
-          newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
-          newStartVnode = newCh[++newStartIdx];
-        } else {
-          elmToMove = oldCh[idxInOld];
-
-          if (isVNode(elmToMove)) {
-            if (elmToMove.sel !== newStartVnode.sel) {
-              // New element
-              newStartVnode.hook.create(newStartVnode);
-              newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
-            } else {
-              patchVnode(elmToMove, newStartVnode);
-              oldCh[idxInOld] = undefined;
-              newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
-            }
-          }
-
-          newStartVnode = newCh[++newStartIdx];
-        }
-      }
-    }
-
-    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-      if (oldStartIdx > oldEndIdx) {
-        // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
-        // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-        let i = newEndIdx;
-        let n;
-
-        do {
-          n = newCh[++i];
-        } while (!isVNode(n) && i < newChEnd);
-
-        before = isVNode(n) ? n.elm : null;
-        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
-      } else {
-        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
-      }
-    }
-  }
-
-  function updateStaticChildren(parentElm, oldCh, newCh) {
-    const oldChLength = oldCh.length;
-    const newChLength = newCh.length;
-
-    if (oldChLength === 0) {
-      // the old list is empty, we can directly insert anything new
-      addVnodes(parentElm, null, newCh, 0, newChLength);
-      return;
-    }
-
-    if (newChLength === 0) {
-      // the old list is nonempty and the new list is empty so we can directly remove all old nodes
-      // this is the case in which the dynamic children of an if-directive should be removed
-      removeVnodes(parentElm, oldCh, 0, oldChLength);
-      return;
-    } // if the old list is not empty, the new list MUST have the same
-    // amount of nodes, that's why we call this static children
-
-
-    let referenceElm = null;
-
-    for (let i = newChLength - 1; i >= 0; i -= 1) {
-      const vnode = newCh[i];
-      const oldVNode = oldCh[i];
-
-      if (vnode !== oldVNode) {
-        if (isVNode(oldVNode)) {
-          if (isVNode(vnode)) {
-            // both vnodes must be equivalent, and se just need to patch them
-            patchVnode(oldVNode, vnode);
-            referenceElm = vnode.elm;
-          } else {
-            // removing the old vnode since the new one is null
-            oldVNode.hook.remove(oldVNode, parentElm);
-          }
-        } else if (isVNode(vnode)) {
-          // this condition is unnecessary
-          vnode.hook.create(vnode); // insert the new node one since the old one is null
-
-          vnode.hook.insert(vnode, parentElm, referenceElm);
-          referenceElm = vnode.elm;
-        }
-      }
-    }
-  }
-
-  function patchVnode(oldVnode, vnode) {
-    if (oldVnode !== vnode) {
-      vnode.elm = oldVnode.elm;
-      vnode.hook.update(oldVnode, vnode);
-    }
-  }
+  const HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
+  const HTMLElementPrototype = HTMLElementConstructor$1.prototype;
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1163,7 +990,6 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-
   const defaultDefHTMLPropertyNames = ['accessKey', 'dir', 'draggable', 'hidden', 'id', 'lang', 'spellcheck', 'tabIndex', 'title'];
 
   function offsetPropertyErrorMessage(name) {
@@ -1275,18 +1101,6 @@
     controlledElement = elm;
     controlledAttributeName = key;
   }
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  // This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
-  // to inject at runtime.
-
-
-  const HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
-  const HTMLElementPrototype = HTMLElementConstructor$1.prototype;
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1301,6 +1115,7 @@
    * Base Lightning Element should support.
    */
 
+
   const HTMLElementOriginalDescriptors = create(null);
   forEach.call(keys(AriaPropNameToAttrNameMap), propName => {
     // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
@@ -1325,6 +1140,7 @@
    * Copyright (C) 2017 salesforce.com, inc.
    */
 
+
   const {
     isArray
   } = Array;
@@ -2061,7 +1877,9 @@
     if (vm.renderMode === 1
     /* Shadow */
     ) {
-      doAttachShadow(vm);
+      vm.renderRoot = doAttachShadow(vm);
+    } else {
+      vm.renderRoot = elm;
     } // Adding extra guard rails in DEV mode.
 
     return this;
@@ -2076,15 +1894,17 @@
         ctor
       }
     } = vm;
-    const cmpRoot = attachShadow$1(elm, {
+    const shadowRoot = attachShadow$1(elm, {
       [KEY__SYNTHETIC_MODE]: shadowMode === 1
       /* Synthetic */
       ,
       delegatesFocus: Boolean(ctor.delegatesFocus),
       mode
     });
-    vm.cmpRoot = cmpRoot;
-    associateVM(cmpRoot, vm);
+    vm.shadowRoot = shadowRoot;
+    associateVM(shadowRoot, vm);
+
+    return shadowRoot;
   }
 
 
@@ -2213,7 +2033,7 @@
     get template() {
       const vm = getAssociatedVM(this);
 
-      return vm.cmpRoot;
+      return vm.shadowRoot;
     },
 
     get shadowRoot() {
@@ -3152,6 +2972,11 @@
     return def;
   }
 
+  function getComponentHtmlPrototype(Ctor) {
+    const def = getComponentInternalDef(Ctor);
+    return def.bridge;
+  }
+
   const lightingElementDef = {
     ctor: LightningElement,
     name: LightningElement.name,
@@ -3215,29 +3040,86 @@
     };
   }
   /*
-   * Copyright (c) 2018, salesforce.com, inc.
+   * Copyright (c) 2020, salesforce.com, inc.
    * All rights reserved.
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
 
-  const xlinkNS = 'http://www.w3.org/1999/xlink';
-  const xmlNS = 'http://www.w3.org/XML/1998/namespace';
-  const ColonCharCode = 58;
-
-  function patchAttributes(oldVnode, vnode) {
-    const {
-      attrs
-    } = vnode.data;
+  function getUpgradableConstructor(tagName) {
+    // Should never get a tag with upper case letter at this point, the compiler should
+    // produce only tags with lowercase letters
+    // But, for backwards compatibility, we will lower case the tagName
+    tagName = tagName.toLowerCase();
+    let CE = getCustomElement$1(tagName);
 
-    if (isUndefined$1(attrs)) {
-      return;
+    if (!isUndefined$1(CE)) {
+      return CE;
     }
+    /**
+     * LWC Upgradable Element reference to an element that was created
+     * via the scoped registry mechanism, and that is ready to be upgraded.
+     */
 
-    const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
 
-    if (oldAttrs === attrs) {
+    CE = class LWCUpgradableElement extends HTMLElementExported$1 {
+      constructor(upgradeCallback) {
+        super();
+
+        if (isFunction$1(upgradeCallback)) {
+          upgradeCallback(this); // nothing to do with the result for now
+        }
+      }
+
+    };
+    defineCustomElement$1(tagName, CE);
+    return CE;
+  }
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+
+  function isVBaseElement(vnode) {
+    const {
+      type
+    } = vnode;
+    return type === 2
+    /* Element */
+    || type === 3
+    /* CustomElement */
+    ;
+  }
+
+  function isSameVnode(vnode1, vnode2) {
+    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
+  }
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+
+  const ColonCharCode = 58;
+
+  function patchAttributes(oldVnode, vnode) {
+    const {
+      attrs
+    } = vnode.data;
+
+    if (isUndefined$1(attrs)) {
+      return;
+    }
+
+    const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
+
+    if (oldAttrs === attrs) {
       return;
     }
 
@@ -3254,10 +3136,10 @@
 
         if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
           // Assume xml namespace
-          setAttribute$1(elm, key, cur, xmlNS);
+          setAttribute$1(elm, key, cur, XML_NAMESPACE);
         } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
           // Assume xlink namespace
-          setAttribute$1(elm, key, cur, xlinkNS);
+          setAttribute$1(elm, key, cur, XLINK_NAMESPACE);
         } else if (isNull(cur) || isUndefined$1(cur)) {
           removeAttribute$1(elm, key);
         } else {
@@ -3506,6 +3388,153 @@
    */
 
 
+  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);
+    }
+  };
+  const CustomElementHook = {
+    create: vnode => {
+      const {
+        sel,
+        owner
+      } = vnode;
+      const UpgradableConstructor = getUpgradableConstructor(sel);
+      /**
+       * Note: if the upgradable constructor does not expect, or throw when we new it
+       * with a callback as the first argument, we could implement a more advanced
+       * mechanism that only passes that argument if the constructor is known to be
+       * an upgradable custom element.
+       */
+
+      let vm;
+      const elm = new UpgradableConstructor(elm => {
+        // the custom element from the registry is expecting an upgrade callback
+        vm = createViewModelHook(elm, vnode);
+      });
+      linkNodeToShadow(elm, owner);
+      vnode.elm = elm;
+
+      if (vm) {
+        allocateChildren(vnode, vm);
+      } else if (vnode.ctor !== UpgradableConstructor) {
+        throw new TypeError(`Incorrect Component Constructor`);
+      }
+
+      patchElementPropsAndAttrs$1(null, vnode);
+    },
+    update: (oldVnode, vnode) => {
+      patchElementPropsAndAttrs$1(oldVnode, vnode);
+      const vm = getAssociatedVMIfPresent(vnode.elm);
+
+      if (vm) {
+        // in fallback mode, the allocation will always set children to
+        // empty and delegate the real allocation to the slot elements
+        allocateChildren(vnode, vm);
+      } // in fallback mode, the children will be always empty, so, nothing
+      // will happen, but in native, it does allocate the light dom
+
+
+      patchChildren(vnode.elm, oldVnode.children, vnode.children);
+
+      if (vm) {
+        // this is important to preserve the top to bottom synchronous rendering phase.
+
+
+        rerenderVM(vm);
+      }
+    },
+    insert: (vnode, parentNode, referenceNode) => {
+      insertNode(vnode, parentNode, referenceNode);
+      const vm = getAssociatedVMIfPresent(vnode.elm);
+
+      if (vm) {
+
+        runConnectedCallback(vm);
+      }
+
+      createChildrenHook(vnode);
+
+      if (vm) {
+        appendVM(vm);
+      }
+    },
+    move: insertNode,
+    remove: (vnode, parentNode) => {
+      removeNode(vnode, parentNode);
+      const vm = getAssociatedVMIfPresent(vnode.elm);
+
+      if (vm) {
+        // for custom elements we don't have to go recursively because the removeVM routine
+        // will take care of disconnecting any child VM attached to its shadow as well.
+        removeVM(vm);
+      }
+    }
+  };
+
+  function isVNode(vnode) {
+    return vnode != null;
+  }
+
   function observeElementChildNodes(elm) {
     elm.$domManual$ = true;
   }
@@ -3527,6 +3556,24 @@
     }
   }
 
+  function linkNodeToShadow(elm, owner) {
+    const {
+      renderRoot,
+      renderMode,
+      shadowMode
+    } = owner; // TODO [#1164]: this should eventually be done by the polyfill directly
+
+    if (isSyntheticShadowDefined$1) {
+      if (shadowMode === 1
+      /* Synthetic */
+      || renderMode === 0
+      /* Light */
+      ) {
+        elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
+      }
+    }
+  }
+
   function updateNodeHook(oldVnode, vnode) {
     const {
       elm,
@@ -3539,17 +3586,17 @@
     }
   }
 
-  function insertNodeHook(vnode, parentNode, referenceNode) {
+  function insertNode(vnode, parentNode, referenceNode) {
 
     insert$1(vnode.elm, parentNode, referenceNode);
   }
 
-  function removeNodeHook(vnode, parentNode) {
+  function removeNode(vnode, parentNode) {
 
     remove$1(vnode.elm, parentNode);
   }
 
-  function patchElementPropsAndAttrs(oldVnode, vnode) {
+  function patchElementPropsAndAttrs$1(oldVnode, vnode) {
     if (isNull(oldVnode)) {
       applyEventListeners(vnode);
       applyStaticClassAttribute(vnode);
@@ -3564,11 +3611,6 @@
     patchProps(oldVnode, vnode);
   }
 
-  function hydrateElmHook(vnode) {
-    applyEventListeners(vnode);
-    patchProps(null, vnode);
-  }
-
   function fallbackElmHook(elm, vnode) {
     const {
       owner
@@ -3588,7 +3630,7 @@
       } = owner.context;
 
       if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
-      /* manual */
+      /* Manual */
       ) {
         // this element will now accept any manual content inserted into it
         observeElementChildNodes(elm);
@@ -3608,7 +3650,7 @@
     }
   }
 
-  function allocateChildrenHook(vnode, vm) {
+  function allocateChildren(vnode, vm) {
     // A component with slots will re-render because:
     // 1- There is a change of the internal state.
     // 2- There is a change on the external api (ex: slots)
@@ -3641,11 +3683,12 @@
   }
 
   function createViewModelHook(elm, vnode) {
-    if (!isUndefined$1(getAssociatedVMIfPresent(elm))) {
-      // There is a possibility that a custom element is registered under tagName,
-      // in which case, the initialization is already carry on, and there is nothing else
-      // to do here since this hook is called right after invoking `document.createElement`.
-      return;
+    let vm = getAssociatedVMIfPresent(elm); // There is a possibility that a custom element is registered under tagName, in which case, the
+    // initialization is already carry on, and there is nothing else to do here since this hook is
+    // called right after invoking `document.createElement`.
+
+    if (!isUndefined$1(vm)) {
+      return vm;
     }
 
     const {
@@ -3667,12 +3710,13 @@
       setElementShadowToken(elm, stylesheetToken);
     }
 
-    const def = getComponentInternalDef(ctor);
-    createVM(elm, def, {
+    vm = createVM(elm, ctor, {
       mode,
       owner,
       tagName: sel
     });
+
+    return vm;
   }
 
   function createChildrenHook(vnode) {
@@ -3691,23 +3735,7 @@
     }
   }
 
-  function hydrateChildrenHook(elmChildren, children, vm) {
-
-    let elmCurrentChildIdx = 0;
-
-    for (let j = 0, n = children.length; j < n; j++) {
-      const ch = children[j];
-
-      if (ch != null) {
-        const childNode = elmChildren[elmCurrentChildIdx];
-
-        ch.hook.hydrate(ch, childNode);
-        elmCurrentChildIdx++;
-      }
-    }
-  }
-
-  function removeElmHook(vnode) {
+  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.
@@ -3726,6 +3754,8 @@
   }
 
   function allocateInSlot(vm, children) {
+    var _a;
+
     const {
       cmpSlots: oldSlots
     } = vm;
@@ -3738,10 +3768,12 @@
         continue;
       }
 
-      const {
-        data
-      } = vnode;
-      const slotName = data.attrs && data.attrs.slot || '';
+      let slotName = '';
+
+      if (isVBaseElement(vnode)) {
+        slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
+      }
+
       const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || []; // re-keying the vnodes is necessary to avoid conflicts with default content for the slot
       // which might have similar keys. Each vnode will always have a key that
       // starts with a numeric character from compiler. In this case, we add a unique
@@ -3796,293 +3828,204 @@
   function hasDynamicChildren(children) {
     return FromIteration.has(children);
   }
-  /*
-   * Copyright (c) 2020, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-
-
-  function getUpgradableConstructor(tagName) {
-    // Should never get a tag with upper case letter at this point, the compiler should
-    // produce only tags with lowercase letters
-    // But, for backwards compatibility, we will lower case the tagName
-    tagName = tagName.toLowerCase();
-    let CE = getCustomElement$1(tagName);
 
-    if (!isUndefined$1(CE)) {
-      return CE;
-    }
-    /**
-     * LWC Upgradable Element reference to an element that was created
-     * via the scoped registry mechanism, and that is ready to be upgraded.
-     */
+  function createKeyToOldIdx(children, beginIdx, endIdx) {
+    const map = {}; // TODO [#1637]: simplify this by assuming that all vnodes has keys
 
+    for (let j = beginIdx; j <= endIdx; ++j) {
+      const ch = children[j];
 
-    CE = class LWCUpgradableElement extends HTMLElementExported$1 {
-      constructor(upgradeCallback) {
-        super();
+      if (isVNode(ch)) {
+        const {
+          key
+        } = ch;
 
-        if (isFunction$1(upgradeCallback)) {
-          upgradeCallback(this); // nothing to do with the result for now
+        if (key !== undefined) {
+          map[key] = j;
         }
       }
-
-    };
-    defineCustomElement$1(tagName, CE);
-    return CE;
-  }
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-
-
-  const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
-  const SymbolIterator = Symbol.iterator;
-  const TextHook = {
-    create: vnode => {
-      const {
-        owner
-      } = vnode;
-      const elm = createText$1(vnode.text);
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
-    },
-    update: updateNodeHook,
-    insert: insertNodeHook,
-    move: insertNodeHook,
-    remove: removeNodeHook,
-    hydrate: (vNode, node) => {
-      var _a;
-
-
-      node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
-      vNode.elm = node;
     }
-  };
-  const CommentHook = {
-    create: vnode => {
-      const {
-        owner,
-        text
-      } = vnode;
-      const elm = createComment$1(text);
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
-    },
-    update: updateNodeHook,
-    insert: insertNodeHook,
-    move: insertNodeHook,
-    remove: removeNodeHook,
-    hydrate: (vNode, node) => {
-      var _a;
-
 
-      node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
-      vNode.elm = node;
-    }
-  }; // insert is called after update, which is used somewhere else (via a module)
-  // to mark the vm as inserted, that means we cannot use update as the main channel
-  // to rehydrate when dirty, because sometimes the element is not inserted just yet,
-  // which breaks some invariants. For that reason, we have the following for any
-  // Custom Element that is inserted via a template.
-
-  const ElementHook = {
-    create: vnode => {
-      const {
-        sel,
-        owner,
-        data: {
-          svg
-        }
-      } = vnode;
-      const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-      const elm = createElement$2(sel, namespace);
-      linkNodeToShadow(elm, owner);
-      fallbackElmHook(elm, vnode);
-      vnode.elm = elm;
-      patchElementPropsAndAttrs(null, vnode);
-    },
-    update: (oldVnode, vnode) => {
-      patchElementPropsAndAttrs(oldVnode, vnode);
-      patchChildren(vnode.elm, oldVnode.children, vnode.children);
-    },
-    insert: (vnode, parentNode, referenceNode) => {
-      insertNodeHook(vnode, parentNode, referenceNode);
-      createChildrenHook(vnode);
-    },
-    move: (vnode, parentNode, referenceNode) => {
-      insertNodeHook(vnode, parentNode, referenceNode);
-    },
-    remove: (vnode, parentNode) => {
-      removeNodeHook(vnode, parentNode);
-      removeElmHook(vnode);
-    },
-    hydrate: (vnode, node) => {
-      const elm = node;
-      vnode.elm = elm;
-      const {
-        context
-      } = vnode.data;
-      const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
-      /* manual */
-      );
+    return map;
+  }
 
-      if (isDomManual) {
-        // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
-        // remove the innerHTML from props so it reuses the existing dom elements.
-        const {
-          props
-        } = vnode.data;
+  function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
+    for (; startIdx <= endIdx; ++startIdx) {
+      const ch = vnodes[startIdx];
 
-        if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-          if (elm.innerHTML === props.innerHTML) {
-            delete props.innerHTML;
-          } else {
-            logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
-          }
-        }
+      if (isVNode(ch)) {
+        ch.hook.create(ch);
+        ch.hook.insert(ch, parentElm, before);
       }
+    }
+  }
 
-      hydrateElmHook(vnode);
+  function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
+    for (; startIdx <= endIdx; ++startIdx) {
+      const ch = vnodes[startIdx]; // text nodes do not have logic associated to them
 
-      if (!isDomManual) {
-        hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
+      if (isVNode(ch)) {
+        ch.hook.remove(ch, parentElm);
       }
     }
-  };
-  const CustomElementHook = {
-    create: vnode => {
-      const {
-        sel,
-        owner
-      } = vnode;
-      const UpgradableConstructor = getUpgradableConstructor(sel);
-      /**
-       * Note: if the upgradable constructor does not expect, or throw when we new it
-       * with a callback as the first argument, we could implement a more advanced
-       * mechanism that only passes that argument if the constructor is known to be
-       * an upgradable custom element.
-       */
+  }
 
-      const elm = new UpgradableConstructor(elm => {
-        // the custom element from the registry is expecting an upgrade callback
-        createViewModelHook(elm, vnode);
-      });
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
-      const vm = getAssociatedVMIfPresent(elm);
+  function updateDynamicChildren(parentElm, oldCh, newCh) {
+    let oldStartIdx = 0;
+    let newStartIdx = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    const newChEnd = newCh.length - 1;
+    let newEndIdx = newChEnd;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let oldKeyToIdx;
+    let idxInOld;
+    let elmToMove;
+    let before;
 
-      if (vm) {
-        allocateChildrenHook(vnode, vm);
-      } else if (vnode.ctor !== UpgradableConstructor) {
-        throw new TypeError(`Incorrect Component Constructor`);
-      }
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+      if (!isVNode(oldStartVnode)) {
+        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
+      } else if (!isVNode(oldEndVnode)) {
+        oldEndVnode = oldCh[--oldEndIdx];
+      } else if (!isVNode(newStartVnode)) {
+        newStartVnode = newCh[++newStartIdx];
+      } else if (!isVNode(newEndVnode)) {
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldStartVnode, newStartVnode)) {
+        patchVnode(oldStartVnode, newStartVnode);
+        oldStartVnode = oldCh[++oldStartIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else if (isSameVnode(oldEndVnode, newEndVnode)) {
+        patchVnode(oldEndVnode, newEndVnode);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldStartVnode, newEndVnode)) {
+        // Vnode moved right
+        patchVnode(oldStartVnode, newEndVnode);
+        newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling$1(oldEndVnode.elm));
+        oldStartVnode = oldCh[++oldStartIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldEndVnode, newStartVnode)) {
+        // Vnode moved left
+        patchVnode(oldEndVnode, newStartVnode);
+        newStartVnode.hook.move(oldEndVnode, parentElm, oldStartVnode.elm);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        if (oldKeyToIdx === undefined) {
+          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
+        }
 
-      patchElementPropsAndAttrs(null, vnode);
-    },
-    update: (oldVnode, vnode) => {
-      patchElementPropsAndAttrs(oldVnode, vnode);
-      const vm = getAssociatedVMIfPresent(vnode.elm);
+        idxInOld = oldKeyToIdx[newStartVnode.key];
 
-      if (vm) {
-        // in fallback mode, the allocation will always set children to
-        // empty and delegate the real allocation to the slot elements
-        allocateChildrenHook(vnode, vm);
-      } // in fallback mode, the children will be always empty, so, nothing
-      // will happen, but in native, it does allocate the light dom
+        if (isUndefined$1(idxInOld)) {
+          // New element
+          newStartVnode.hook.create(newStartVnode);
+          newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+          newStartVnode = newCh[++newStartIdx];
+        } else {
+          elmToMove = oldCh[idxInOld];
 
+          if (isVNode(elmToMove)) {
+            if (elmToMove.sel !== newStartVnode.sel) {
+              // New element
+              newStartVnode.hook.create(newStartVnode);
+              newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+            } else {
+              patchVnode(elmToMove, newStartVnode);
+              oldCh[idxInOld] = undefined;
+              newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
+            }
+          }
 
-      patchChildren(vnode.elm, oldVnode.children, vnode.children);
+          newStartVnode = newCh[++newStartIdx];
+        }
+      }
+    }
 
-      if (vm) {
-        // this is important to preserve the top to bottom synchronous rendering phase.
+    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+      if (oldStartIdx > oldEndIdx) {
+        // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
+        // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
+        let i = newEndIdx;
+        let n;
 
+        do {
+          n = newCh[++i];
+        } while (!isVNode(n) && i < newChEnd);
 
-        rerenderVM(vm);
+        before = isVNode(n) ? n.elm : null;
+        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
+      } else {
+        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
       }
-    },
-    insert: (vnode, parentNode, referenceNode) => {
-      insertNodeHook(vnode, parentNode, referenceNode);
-      const vm = getAssociatedVMIfPresent(vnode.elm);
+    }
+  }
 
-      if (vm) {
+  function updateStaticChildren(parentElm, oldCh, newCh) {
+    const oldChLength = oldCh.length;
+    const newChLength = newCh.length;
 
-        runConnectedCallback(vm);
-      }
+    if (oldChLength === 0) {
+      // the old list is empty, we can directly insert anything new
+      addVnodes(parentElm, null, newCh, 0, newChLength);
+      return;
+    }
 
-      createChildrenHook(vnode);
+    if (newChLength === 0) {
+      // the old list is nonempty and the new list is empty so we can directly remove all old nodes
+      // this is the case in which the dynamic children of an if-directive should be removed
+      removeVnodes(parentElm, oldCh, 0, oldChLength);
+      return;
+    } // if the old list is not empty, the new list MUST have the same
+    // amount of nodes, that's why we call this static children
 
-      if (vm) {
-        appendVM(vm);
-      }
-    },
-    move: (vnode, parentNode, referenceNode) => {
-      insertNodeHook(vnode, parentNode, referenceNode);
-    },
-    remove: (vnode, parentNode) => {
-      removeNodeHook(vnode, parentNode);
-      const vm = getAssociatedVMIfPresent(vnode.elm);
 
-      if (vm) {
-        // for custom elements we don't have to go recursively because the removeVM routine
-        // will take care of disconnecting any child VM attached to its shadow as well.
-        removeVM(vm);
-      }
-    },
-    hydrate: (vnode, elm) => {
-      // the element is created, but the vm is not
-      const {
-        sel,
-        mode,
-        ctor,
-        owner
-      } = vnode;
-      const def = getComponentInternalDef(ctor);
-      createVM(elm, def, {
-        mode,
-        owner,
-        tagName: sel
-      });
-      vnode.elm = elm;
-      const vm = getAssociatedVM(elm);
-      allocateChildrenHook(vnode, vm);
-      hydrateElmHook(vnode); // Insert hook section:
+    let referenceElm = null;
+
+    for (let i = newChLength - 1; i >= 0; i -= 1) {
+      const vnode = newCh[i];
+      const oldVNode = oldCh[i];
 
-      runConnectedCallback(vm);
+      if (vnode !== oldVNode) {
+        if (isVNode(oldVNode)) {
+          if (isVNode(vnode)) {
+            // both vnodes must be equivalent, and se just need to patch them
+            patchVnode(oldVNode, vnode);
+            referenceElm = vnode.elm;
+          } else {
+            // removing the old vnode since the new one is null
+            oldVNode.hook.remove(oldVNode, parentElm);
+          }
+        } else if (isVNode(vnode)) {
+          // this condition is unnecessary
+          vnode.hook.create(vnode); // insert the new node one since the old one is null
 
-      if (vm.renderMode !== 0
-      /* Light */
-      ) {
-        // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
-        // Note: for Light DOM, this is handled while hydrating the VM
-        hydrateChildrenHook(vnode.elm.childNodes, vnode.children);
+          vnode.hook.insert(vnode, parentElm, referenceElm);
+          referenceElm = vnode.elm;
+        }
       }
-
-      hydrateVM(vm);
     }
-  };
-
-  function linkNodeToShadow(elm, owner) {
-    const {
-      renderMode,
-      shadowMode
-    } = owner; // TODO [#1164]: this should eventually be done by the polyfill directly
+  }
 
-    if (isSyntheticShadowDefined$1) {
-      if (shadowMode === 1
-      /* Synthetic */
-      || renderMode === 0
-      /* Light */
-      ) {
-        elm[KEY__SHADOW_RESOLVER] = getRenderRoot(owner)[KEY__SHADOW_RESOLVER];
-      }
+  function patchVnode(oldVnode, vnode) {
+    if (oldVnode !== vnode) {
+      vnode.elm = oldVnode.elm;
+      vnode.hook.update(oldVnode, vnode);
     }
   }
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+
+  const SymbolIterator = Symbol.iterator;
 
   function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
@@ -4092,15 +4035,17 @@
   function h(sel, data, children) {
     const vmBeingRendered = getVMBeingRendered();
 
-    let text, elm;
+    let elm;
     const {
       key
     } = data;
     return {
+      type: 2
+      /* Element */
+      ,
       sel,
       data,
       children,
-      text,
       elm,
       key,
       hook: ElementHook,
@@ -4155,12 +4100,14 @@
     const {
       key
     } = data;
-    let text, elm;
+    let elm;
     const vnode = {
+      type: 3
+      /* CustomElement */
+      ,
       sel,
       data,
       children,
-      text,
       elm,
       key,
       hook: CustomElementHook,
@@ -4240,12 +4187,12 @@
 
 
   function t(text) {
-    const data = EmptyObject;
-    let sel, children, key, elm;
+    let sel, key, elm;
     return {
+      type: 0
+      /* Text */
+      ,
       sel,
-      data,
-      children,
       text,
       elm,
       key,
@@ -4256,12 +4203,12 @@
 
 
   function co(text) {
-    const data = EmptyObject;
-    let sel, children, key, elm;
+    let sel, key, elm;
     return {
+      type: 1
+      /* Comment */
+      ,
       sel,
-      data,
-      children,
       text,
       elm,
       key,
@@ -4672,7 +4619,7 @@
           insertGlobalStylesheet$1(stylesheets[i]);
         } else {
           // local level
-          insertStylesheet$1(stylesheets[i], root.cmpRoot);
+          insertStylesheet$1(stylesheets[i], root.shadowRoot);
         }
       }
     }
@@ -4876,25 +4823,6 @@
 
     return false;
   }
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-
-
-  function addErrorComponentStack(vm, error) {
-    if (!isFrozen(error) && isUndefined$1(error.wcStack)) {
-      const wcStack = getErrorComponentStack(vm);
-      defineProperty(error, 'wcStack', {
-        get() {
-          return wcStack;
-        }
-
-      });
-    }
-  }
   let vmBeingConstructed = null;
 
   function isBeingConstructed(vm) {
@@ -5108,6 +5036,142 @@
       cbs[i].call(undefined, component, {}, def, context);
     }
   }
+  /*
+   * Copyright (c) 2022, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+
+  function hydrate$1(vnode, node) {
+    switch (vnode.type) {
+      case 0
+      /* Text */
+      :
+        hydrateText(vnode, node);
+        break;
+
+      case 1
+      /* Comment */
+      :
+        hydrateComment(vnode, node);
+        break;
+
+      case 2
+      /* Element */
+      :
+        hydrateElement(vnode, node);
+        break;
+
+      case 3
+      /* CustomElement */
+      :
+        hydrateCustomElement(vnode, node);
+        break;
+    }
+  }
+
+  function hydrateText(vnode, node) {
+    var _a;
+
+
+    node.nodeValue = (_a = vnode.text) !== null && _a !== void 0 ? _a : null;
+    vnode.elm = node;
+  }
+
+  function hydrateComment(vnode, node) {
+    var _a;
+
+
+    node.nodeValue = (_a = vnode.text) !== null && _a !== void 0 ? _a : null;
+    vnode.elm = node;
+  }
+
+  function hydrateElement(vnode, node) {
+
+    const elm = node;
+    vnode.elm = elm;
+    const {
+      context
+    } = vnode.data;
+    const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
+    /* Manual */
+    );
+
+    if (isDomManual) {
+      // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+      // remove the innerHTML from props so it reuses the existing dom elements.
+      const {
+        props
+      } = vnode.data;
+
+      if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
+        if (elm.innerHTML === props.innerHTML) {
+          delete props.innerHTML;
+        } else {
+          logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
+        }
+      }
+    }
+
+    patchElementPropsAndAttrs(vnode);
+
+    if (!isDomManual) {
+      hydrateChildren(vnode.elm.childNodes, vnode.children, vnode.owner);
+    }
+  }
+
+  function hydrateCustomElement(vnode, node) {
+
+    const elm = node;
+    vnode.elm = elm;
+    const {
+      sel,
+      mode,
+      ctor,
+      owner
+    } = vnode;
+    const vm = createVM(elm, ctor, {
+      mode,
+      owner,
+      tagName: sel
+    });
+    allocateChildren(vnode, vm);
+    patchElementPropsAndAttrs(vnode); // Insert hook section:
+
+    runConnectedCallback(vm);
+
+    if (vm.renderMode !== 0
+    /* Light */
+    ) {
+      // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+      // Note: for Light DOM, this is handled while hydrating the VM
+      hydrateChildren(vnode.elm.childNodes, vnode.children);
+    }
+
+    hydrateVM(vm);
+  }
+
+  function hydrateChildren(elmChildren, children, vm) {
+
+    let childNodeIndex = 0;
+
+    for (let i = 0; i < children.length; i++) {
+      const childVnode = children[i];
+
+      if (!isNull(childVnode)) {
+        const childNode = elmChildren[childNodeIndex];
+        hydrate$1(childVnode, childNode);
+        childNodeIndex++;
+      }
+    }
+  }
+
+  function patchElementPropsAndAttrs(vnode) {
+    applyEventListeners(vnode);
+    patchProps(null, vnode);
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -5223,12 +5287,13 @@
     return ancestor;
   }
 
-  function createVM(elm, def, options) {
+  function createVM(elm, ctor, options) {
     const {
       mode,
       owner,
       tagName
     } = options;
+    const def = getComponentInternalDef(ctor);
     const vm = {
       elm,
       def,
@@ -5250,7 +5315,6 @@
       oar: create(null),
       cmpTemplate: null,
       renderMode: def.renderMode,
-      shadowMode: null,
       context: {
         stylesheetToken: undefined,
         hasTokenInClass: undefined,
@@ -5261,9 +5325,13 @@
         wiredConnecting: EmptyArray,
         wiredDisconnecting: EmptyArray
       },
+      // Properties set right after VM creation.
       tro: null,
+      shadowMode: null,
+      // Properties set by the LightningElement constructor.
       component: null,
-      cmpRoot: null,
+      shadowRoot: null,
+      renderRoot: null,
       callHook,
       setHook,
       getHook
@@ -5372,13 +5440,14 @@
       const vmChildren = vm.renderMode === 0
       /* Light */
       ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
-      hydrateChildrenHook(vmChildren, children);
+      hydrateChildren(vmChildren, children);
       runRenderedCallback(vm);
     }
   }
 
   function patchShadowRoot(vm, newCh) {
     const {
+      renderRoot,
       children: oldCh
     } = vm; // caching the new children collection
 
@@ -5395,7 +5464,6 @@
           , vm);
         }, () => {
           // job
-          const renderRoot = getRenderRoot(vm);
           patchChildren(renderRoot, oldCh, newCh);
         }, () => {
           // post
@@ -5622,14 +5690,22 @@
     for (let i = 0, len = vnodes.length; i < len; i += 1) {
       const vnode = vnodes[i];
 
-      if (!isNull(vnode) && isArray$1(vnode.children) && !isUndefined$1(vnode.elm)) {
-        // vnode is a VElement with children
-        if (isUndefined$1(vnode.ctor)) {
-          // it is a VElement, just keep looking (recursively)
-          recursivelyDisconnectChildren(vnode.children);
-        } else {
-          // it is a VCustomElement, disconnect it and ignore its children
-          resetComponentStateWhenRemoved(getAssociatedVM(vnode.elm));
+      if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
+        switch (vnode.type) {
+          case 2
+          /* Element */
+          :
+            recursivelyDisconnectChildren(vnode.children);
+            break;
+
+          case 3
+          /* CustomElement */
+          :
+            {
+              const vm = getAssociatedVM(vnode.elm);
+              resetComponentStateWhenRemoved(vm);
+              break;
+            }
         }
       }
     }
@@ -5641,15 +5717,15 @@
 
   function resetComponentRoot(vm) {
     const {
-      children
+      children,
+      renderRoot
     } = vm;
-    const rootNode = getRenderRoot(vm);
 
     for (let i = 0, len = children.length; i < len; i++) {
       const child = children[i];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
-        remove$1(child.elm, rootNode);
+        remove$1(child.elm, renderRoot);
       }
     }
 
@@ -5717,12 +5793,6 @@
       }
     }
   }
-
-  function getRenderRoot(vm) {
-    return vm.renderMode === 1
-    /* Shadow */
-    ? vm.cmpRoot : vm.elm;
-  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6104,7 +6174,7 @@
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.7.3 */
+  /* version: 2.7.4 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6538,8 +6608,7 @@
      */
 
     const element = new UpgradableConstructor(elm => {
-      const def = getComponentInternalDef(Ctor);
-      createVM(elm, def, {
+      createVM(elm, Ctor, {
         tagName: sel,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
         owner: null
@@ -6577,13 +6646,11 @@
       throw new TypeError(`"hydrateComponent" expects an object as the third parameter but instead received ${props}.`);
     }
 
-    const def = getComponentInternalDef(Ctor);
-
     try {
       // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
       // and uses the same algo to create the stylesheets as in SSR.
       setIsHydrating(true);
-      createVM(element, def, {
+      createVM(element, Ctor, {
         mode: 'open',
         owner: null,
         tagName: element.tagName.toLowerCase()
@@ -6645,11 +6712,11 @@
   }
 
   function buildCustomElementConstructor(Ctor) {
-    const def = getComponentInternalDef(Ctor);
-    return class extends def.bridge {
+    const HtmlPrototype = getComponentHtmlPrototype(Ctor);
+    return class extends HtmlPrototype {
       constructor() {
         super();
-        createVM(this, def, {
+        createVM(this, Ctor, {
           mode: 'open',
           owner: null,
           tagName: this.tagName
@@ -6772,7 +6839,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.7.3 */
+  /* version: 2.7.4 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;