lwc 2.9.0 → 2.11.1

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

@@ -7,14 +7,6 @@ var LWC = (function (exports) {
 
   function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
 
-  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
   function _get2() { if (typeof Reflect !== "undefined" && Reflect.get) { _get2 = Reflect.get; } else { _get2 = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get2.apply(this, arguments); }
 
   function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf2(object); if (object === null) break; } return object; }
@@ -41,6 +33,14 @@ var LWC = (function (exports) {
 
   function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
+  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
   function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
   function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -352,7 +352,17 @@ var LWC = (function (exports) {
   var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   var XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-  /** version: 2.9.0 */
+  /*
+   * 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
+
+  var LWC_VERSION = "2.11.1";
+  var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
+  /** version: 2.11.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -417,7 +427,7 @@ var LWC = (function (exports) {
     };
   }
 
-  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
@@ -439,7 +449,7 @@ var LWC = (function (exports) {
     var propName = ElementPrototypeAriaPropertyNames[_i2];
 
     if (detect(propName)) {
-      patch(propName);
+      patch$1(propName);
     }
   }
   /**
@@ -455,14 +465,15 @@ var LWC = (function (exports) {
 
 
   var features = {
-    ENABLE_REACTIVE_SETTER: null,
-    ENABLE_HMR: null,
-    ENABLE_INNER_OUTER_TEXT_PATCH: 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_MIXED_SHADOW_MODE: null,
+    ENABLE_NODE_LIST_PATCH: null,
     ENABLE_NODE_PATCH: null,
+    ENABLE_REACTIVE_SETTER: null,
     ENABLE_WIRE_SYNC_EMIT: null
   };
 
@@ -529,7 +540,7 @@ var LWC = (function (exports) {
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.9.0 */
+  /** version: 2.11.1 */
 
   /* proxy-compat-disable */
 
@@ -632,6 +643,31 @@ var LWC = (function (exports) {
     }
 
     return result;
+  }
+
+  function flattenStylesheets(stylesheets) {
+    var list = [];
+
+    var _iterator2 = _createForOfIteratorHelper(stylesheets),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var stylesheet = _step2.value;
+
+        if (!Array.isArray(stylesheet)) {
+          list.push(stylesheet);
+        } else {
+          list.push.apply(list, _toConsumableArray(flattenStylesheets(stylesheet)));
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+
+    return list;
   } //
   // Primitives
   //
@@ -1127,6 +1163,7 @@ var LWC = (function (exports) {
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // These properties get added to LWCElement.prototype publicProps automatically
 
   var defaultDefHTMLPropertyNames = ['accessKey', 'dir', 'draggable', 'hidden', 'id', 'lang', 'spellcheck', 'tabIndex', 'title'];
 
@@ -3392,6 +3429,48 @@ var LWC = (function (exports) {
     var 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
+   */
+
+
+  var warned = false;
+
+  if (process.env.NODE_ENV === 'development') {
+    // @ts-ignore
+    window.__lwcResetWarnedOnVersionMismatch = function () {
+      warned = false;
+    };
+  }
+
+  function checkVersionMismatch(func, type) {
+    var versionMatcher = func.toString().match(LWC_VERSION_COMMENT_REGEX);
+
+    if (!isNull(versionMatcher) && !warned) {
+      var version = versionMatcher[1];
+
+      var _version$split = version.split('.'),
+          _version$split2 = _slicedToArray(_version$split, 2),
+          major = _version$split2[0],
+          minor = _version$split2[1];
+
+      var _LWC_VERSION$split = LWC_VERSION.split('.'),
+          _LWC_VERSION$split2 = _slicedToArray(_LWC_VERSION$split, 2),
+          expectedMajor = _LWC_VERSION$split2[0],
+          expectedMinor = _LWC_VERSION$split2[1];
+
+      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
+
+        var friendlyName = type === 'component' ? "".concat(type, " ").concat(func.name) : type;
+        logError("LWC WARNING: current engine is v".concat(LWC_VERSION, ", but ").concat(friendlyName, " was compiled with v").concat(version, ".\nPlease update your compiled code or LWC engine so that the versions match.\nNo further warnings will appear."));
+      }
+    }
+  }
 
   var signedTemplateSet = new Set();
 
@@ -3411,6 +3490,10 @@ var LWC = (function (exports) {
 
 
   function registerTemplate(tpl) {
+    if (process.env.NODE_ENV !== 'production') {
+      checkVersionMismatch(tpl, 'template');
+    }
+
     signedTemplateSet.add(tpl); // chaining this method as a way to wrap existing
     // assignment of templates easily, without too much transformation
 
@@ -3433,6 +3516,7 @@ var LWC = (function (exports) {
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // A bridge descriptor is a descriptor whose job is just to get the component instance
   // from the element instance, and get the value or set a new value on the component.
   // This means that across different elements, similar names can get the exact same
   // descriptor, so we can cache them:
@@ -3706,31 +3790,6 @@ var LWC = (function (exports) {
     return canRefreshAllInstances;
   }
 
-  function flattenStylesheets(stylesheets) {
-    var list = [];
-
-    var _iterator2 = _createForOfIteratorHelper(stylesheets),
-        _step2;
-
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var stylesheet = _step2.value;
-
-        if (!Array.isArray(stylesheet)) {
-          list.push(stylesheet);
-        } else {
-          list.push.apply(list, _toConsumableArray(flattenStylesheets(stylesheet)));
-        }
-      }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
-    }
-
-    return list;
-  }
-
   function getTemplateOrSwappedTemplate(tpl) {
     if (process.env.NODE_ENV === 'production') {
       // this method should never leak to prod
@@ -4442,6 +4501,7 @@ var LWC = (function (exports) {
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // The style property is a string when defined via an expression in the template.
 
 
   function patchStyleAttribute(oldVnode, vnode) {
@@ -4486,6 +4546,7 @@ var LWC = (function (exports) {
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // The HTML class property becomes the vnode.data.classMap object when defined as a string in the template.
   // The compiler takes care of transforming the inline classnames into an object. It's faster to set the
   // different classnames properties individually instead of via a string.
 
@@ -4510,6 +4571,7 @@ var LWC = (function (exports) {
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // The HTML style property becomes the vnode.data.styleDecls object when defined as a string in the template.
   // The compiler takes care of transforming the inline style into an object. It's faster to set the
   // different style properties individually instead of via a string.
 
@@ -4539,146 +4601,262 @@ var LWC = (function (exports) {
    */
 
 
-  var TextHook = {
-    create: function create(vnode) {
-      var owner = vnode.owner;
-      var elm = createText$1(vnode.text);
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
-    },
-    update: updateNodeHook,
-    insert: insertNode,
-    move: insertNode,
-    remove: removeNode
-  };
-  var CommentHook = {
-    create: function create(vnode) {
-      var owner = vnode.owner,
-          text = vnode.text;
-      var elm = createComment$1(text);
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
-    },
-    update: updateNodeHook,
-    insert: insertNode,
-    move: insertNode,
-    remove: removeNode
-  }; // insert is called after update, which is used somewhere else (via a module)
-  // to mark the vm as inserted, that means we cannot use update as the main channel
-  // to rehydrate when dirty, because sometimes the element is not inserted just yet,
-  // which breaks some invariants. For that reason, we have the following for any
-  // Custom Element that is inserted via a template.
-
-  var ElementHook = {
-    create: function create(vnode) {
-      var sel = vnode.sel,
-          owner = vnode.owner,
-          svg = vnode.data.svg;
-      var namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-      var elm = createElement$2(sel, namespace);
-      linkNodeToShadow(elm, owner);
-      fallbackElmHook(elm, vnode);
-      vnode.elm = elm;
-      patchElementPropsAndAttrs$1(null, vnode);
-    },
-    update: function update(oldVnode, vnode) {
-      patchElementPropsAndAttrs$1(oldVnode, vnode);
-      patchChildren(vnode.elm, oldVnode.children, vnode.children);
-    },
-    insert: function insert(vnode, parentNode, referenceNode) {
-      insertNode(vnode, parentNode, referenceNode);
-      createChildrenHook(vnode);
-    },
-    move: insertNode,
-    remove: function remove(vnode, parentNode) {
-      removeNode(vnode, parentNode);
-      removeChildren(vnode);
+  function patchChildren(c1, c2, parent) {
+    if (hasDynamicChildren(c2)) {
+      updateDynamicChildren(c1, c2, parent);
+    } else {
+      updateStaticChildren(c1, c2, parent);
     }
-  };
-  var CustomElementHook = {
-    create: function create(vnode) {
-      var sel = vnode.sel,
-          owner = vnode.owner;
-      var UpgradableConstructor = getUpgradableConstructor(sel);
-      /**
-       * Note: if the upgradable constructor does not expect, or throw when we new it
-       * with a callback as the first argument, we could implement a more advanced
-       * mechanism that only passes that argument if the constructor is known to be
-       * an upgradable custom element.
-       */
+  }
 
-      var vm;
-      var elm = new UpgradableConstructor(function (elm) {
-        // the custom element from the registry is expecting an upgrade callback
-        vm = createViewModelHook(elm, vnode);
-      });
-      linkNodeToShadow(elm, owner);
-      vnode.elm = elm;
+  function patch(n1, n2) {
+    if (n1 === n2) {
+      return;
+    }
 
-      if (vm) {
-        allocateChildren(vnode, vm);
-      } else if (vnode.ctor !== UpgradableConstructor) {
-        throw new TypeError("Incorrect Component Constructor");
+    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: function update(oldVnode, vnode) {
-      patchElementPropsAndAttrs$1(oldVnode, vnode);
-      var vm = getAssociatedVMIfPresent(vnode.elm);
+    switch (n2.type) {
+      case 0
+      /* Text */
+      :
+        patchText(n1, n2);
+        break;
+
+      case 1
+      /* Comment */
+      :
+        patchComment(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
+      case 2
+      /* Element */
+      :
+        patchElement(n1, n2);
+        break;
 
+      case 3
+      /* CustomElement */
+      :
+        patchCustomElement(n1, n2);
+        break;
+    }
+  }
 
-      patchChildren(vnode.elm, oldVnode.children, vnode.children);
+  function mount(node, parent, anchor) {
+    switch (node.type) {
+      case 0
+      /* Text */
+      :
+        mountText(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 1
+      /* Comment */
+      :
+        mountComment(node, parent, anchor);
+        break;
 
+      case 2
+      /* Element */
+      :
+        mountElement(node, parent, anchor);
+        break;
 
-        rerenderVM(vm);
-      }
-    },
-    insert: function insert(vnode, parentNode, referenceNode) {
-      insertNode(vnode, parentNode, referenceNode);
-      var vm = getAssociatedVMIfPresent(vnode.elm);
+      case 3
+      /* CustomElement */
+      :
+        mountCustomElement(node, parent, anchor);
+        break;
+    }
+  }
 
-      if (vm) {
-        if (process.env.NODE_ENV !== 'production') {
-          assert.isTrue(vm.state === 0
-          /* created */
-          , "".concat(vm, " cannot be recycled."));
-        }
+  function patchText(n1, n2) {
+    n2.elm = n1.elm;
+
+    if (n2.text !== n1.text) {
+      updateTextContent(n2);
+    }
+  }
+
+  function mountText(node, parent, anchor) {
+    var owner = node.owner;
+    var 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) {
+    var owner = node.owner;
+    var commentNode = node.elm = createComment$1(node.text);
+    linkNodeToShadow(commentNode, owner);
+    insertNode(commentNode, parent, anchor);
+  }
+
+  function mountElement(vnode, parent, anchor) {
+    var sel = vnode.sel,
+        owner = vnode.owner,
+        svg = vnode.data.svg;
+    var namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
+    var elm = createElement$2(sel, namespace);
+    linkNodeToShadow(elm, owner);
+    fallbackElmHook(elm, vnode);
+    vnode.elm = elm;
+    patchElementPropsAndAttrs$1(null, vnode);
+    insertNode(elm, parent, anchor);
+    mountVNodes(vnode.children, elm, null);
+  }
+
+  function patchElement(n1, n2) {
+    var elm = n2.elm = n1.elm;
+    patchElementPropsAndAttrs$1(n1, n2);
+    patchChildren(n1.children, n2.children, elm);
+  }
+
+  function mountCustomElement(vnode, parent, anchor) {
+    var sel = vnode.sel,
+        owner = vnode.owner;
+    var UpgradableConstructor = getUpgradableConstructor(sel);
+    /**
+     * Note: if the upgradable constructor does not expect, or throw when we new it
+     * with a callback as the first argument, we could implement a more advanced
+     * mechanism that only passes that argument if the constructor is known to be
+     * an upgradable custom element.
+     */
 
-        runConnectedCallback(vm);
+    var vm;
+    var elm = new UpgradableConstructor(function (elm) {
+      // the custom element from the registry is expecting an upgrade callback
+      vm = createViewModelHook(elm, vnode);
+    });
+    linkNodeToShadow(elm, owner);
+    vnode.elm = elm;
+    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);
+
+    if (vm) {
+      if (process.env.NODE_ENV !== 'production') {
+        assert.isTrue(vm.state === 0
+        /* created */
+        , "".concat(vm, " cannot be recycled."));
       }
 
-      createChildrenHook(vnode);
+      runConnectedCallback(vm);
+    }
+
+    mountVNodes(vnode.children, elm, null);
+
+    if (vm) {
+      appendVM(vm);
+    }
+  }
+
+  function patchCustomElement(n1, n2) {
+    var elm = n2.elm = n1.elm;
+    var 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
+
 
-      if (vm) {
-        appendVM(vm);
+    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) {
+    var start = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    var end = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : vnodes.length;
+
+    for (; start < end; ++start) {
+      var vnode = vnodes[start];
+
+      if (isVNode(vnode)) {
+        mount(vnode, parent, anchor);
       }
-    },
-    move: insertNode,
-    remove: function remove(vnode, parentNode) {
-      removeNode(vnode, parentNode);
-      var vm = getAssociatedVMIfPresent(vnode.elm);
+    }
+  }
+
+  function unmount(vnode, parent) {
+    var doRemove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var type = vnode.type,
+        elm = vnode.elm; // 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 */
+      :
+        {
+          var vm = vnode.vm; // 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) {
+    var doRemove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var start = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    var end = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : vnodes.length;
 
-      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);
+    for (; start < end; ++start) {
+      var ch = vnodes[start];
+
+      if (isVNode(ch)) {
+        unmount(ch, parent, doRemove);
       }
     }
-  };
+  }
 
   function isVNode(vnode) {
     return vnode != null;
@@ -4719,41 +4897,39 @@ var LWC = (function (exports) {
     }
   }
 
-  function updateNodeHook(oldVnode, vnode) {
+  function updateTextContent(vnode) {
     var elm = vnode.elm,
         text = vnode.text;
 
-    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();
@@ -4814,14 +4990,6 @@ var LWC = (function (exports) {
     }
   }
 
-  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.
@@ -4891,43 +5059,13 @@ var LWC = (function (exports) {
     return vm;
   }
 
-  function createChildrenHook(vnode) {
-    var elm = vnode.elm,
-        children = vnode.children;
-
-    for (var j = 0; j < children.length; ++j) {
-      var 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.
-    var children = vnode.children,
-        elm = vnode.elm;
-
-    for (var j = 0, _len5 = children.length; j < _len5; ++j) {
-      var ch = children[j];
-
-      if (!isNull(ch)) {
-        ch.hook.remove(ch, elm);
-      }
-    }
-  }
-
-  function allocateInSlot(vm, children) {
-    var _a;
+  function allocateInSlot(vm, children) {
+    var _a;
 
     var oldSlots = vm.cmpSlots;
     var cmpSlots = vm.cmpSlots = create(null);
 
-    for (var _i13 = 0, _len6 = children.length; _i13 < _len6; _i13 += 1) {
+    for (var _i13 = 0, _len5 = children.length; _i13 < _len5; _i13 += 1) {
       var vnode = children[_i13];
 
       if (isNull(vnode)) {
@@ -4962,7 +5100,7 @@ var LWC = (function (exports) {
         return;
       }
 
-      for (var _i14 = 0, _len7 = oldKeys.length; _i14 < _len7; _i14 += 1) {
+      for (var _i14 = 0, _len6 = oldKeys.length; _i14 < _len6; _i14 += 1) {
         var key = oldKeys[_i14];
 
         if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
@@ -5013,28 +5151,7 @@ var LWC = (function (exports) {
     return map;
   }
 
-  function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      var ch = vnodes[startIdx];
-
-      if (isVNode(ch)) {
-        ch.hook.create(ch);
-        ch.hook.insert(ch, parentElm, before);
-      }
-    }
-  }
-
-  function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      var ch = vnodes[startIdx]; // text nodes do not have logic associated to them
-
-      if (isVNode(ch)) {
-        ch.hook.remove(ch, parentElm);
-      }
-    }
-  }
-
-  function updateDynamicChildren(parentElm, oldCh, newCh) {
+  function updateDynamicChildren(oldCh, newCh, parent) {
     var oldStartIdx = 0;
     var newStartIdx = 0;
     var oldEndIdx = oldCh.length - 1;
@@ -5060,23 +5177,23 @@ var LWC = (function (exports) {
       } 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 {
@@ -5088,8 +5205,7 @@ var LWC = (function (exports) {
 
         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];
@@ -5097,10 +5213,9 @@ var LWC = (function (exports) {
           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); // Delete the old child, but copy the array since it is read-only.
+              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`
@@ -5113,7 +5228,7 @@ var LWC = (function (exports) {
 
 
               oldCh[idxInOld] = undefined;
-              newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
+              insertNode(elmToMove.elm, parent, oldStartVnode.elm);
             }
           }
 
@@ -5134,65 +5249,55 @@ var LWC = (function (exports) {
         } while (!isVNode(n) && _i15 < 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) {
-    var oldChLength = oldCh.length;
-    var newChLength = newCh.length;
+  function updateStaticChildren(c1, c2, parent) {
+    var c1Length = c1.length;
+    var 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
 
 
-    var referenceElm = null;
+    var anchor = null;
 
-    for (var _i16 = newChLength - 1; _i16 >= 0; _i16 -= 1) {
-      var vnode = newCh[_i16];
-      var oldVNode = oldCh[_i16];
+    for (var _i16 = c2Length - 1; _i16 >= 0; _i16 -= 1) {
+      var n1 = c1[_i16];
+      var n2 = c2[_i16];
 
-      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.
@@ -5243,7 +5348,6 @@ var LWC = (function (exports) {
       children: children,
       elm: elm,
       key: key,
-      hook: ElementHook,
       owner: vmBeingRendered
     };
   } // [t]ab[i]ndex function
@@ -5327,7 +5431,7 @@ var LWC = (function (exports) {
     }
 
     var key = data.key;
-    var elm;
+    var elm, aChildren, vm;
     var vnode = {
       type: 3
       /* CustomElement */
@@ -5337,11 +5441,11 @@ var LWC = (function (exports) {
       children: children,
       elm: elm,
       key: key,
-      hook: CustomElementHook,
       ctor: Ctor,
       owner: vmBeingRendered,
-      mode: 'open' // TODO [#1294]: this should be defined in Ctor
-
+      mode: 'open',
+      aChildren: aChildren,
+      vm: vm
     };
     addVNodeToChildLWC(vnode);
     return vnode;
@@ -5468,7 +5572,6 @@ var LWC = (function (exports) {
       text: text,
       elm: elm,
       key: key,
-      hook: TextHook,
       owner: getVMBeingRendered()
     };
   } // [co]mment node
@@ -5484,7 +5587,6 @@ var LWC = (function (exports) {
       text: text,
       elm: elm,
       key: key,
-      hook: CommentHook,
       owner: getVMBeingRendered()
     };
   } // [d]ynamic text
@@ -5788,9 +5890,11 @@ var LWC = (function (exports) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
       } else {
         if (process.env.NODE_ENV !== 'production') {
-          // in dev-mode, we support hot swapping of stylesheet, which means that
+          // Check for compiler version mismatch in dev mode only
+          checkVersionMismatch(stylesheet, 'stylesheet'); // in dev-mode, we support hot swapping of stylesheet, which means that
           // the component instance might be attempting to use an old version of
           // the stylesheet, while internally, we have a replacement for it.
+
           stylesheet = getStyleOrSwappedStyle(stylesheet);
         }
 
@@ -6315,11 +6419,20 @@ var LWC = (function (exports) {
    * will prevent this function from being imported by userland code.
    */
 
-  function registerComponent(Ctor, _ref2) {
+  function registerComponent( // We typically expect a LightningElementConstructor, but technically you can call this with anything
+  Ctor, _ref2) {
     var tmpl = _ref2.tmpl;
-    signedTemplateMap.set(Ctor, tmpl); // chaining this method as a way to wrap existing assignment of component constructor easily,
+
+    if (isFunction$1(Ctor)) {
+      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
 
+
     return Ctor;
   }
 
@@ -6426,7 +6539,7 @@ var LWC = (function (exports) {
         def = vm.def,
         context = vm.context;
 
-    for (var _i22 = 0, _len8 = cbs.length; _i22 < _len8; ++_i22) {
+    for (var _i22 = 0, _len7 = cbs.length; _i22 < _len7; ++_i22) {
       cbs[_i22].call(undefined, component, {}, def, context);
     }
   }
@@ -6438,7 +6551,7 @@ var LWC = (function (exports) {
    */
 
 
-  function hydrate$1(vnode, node) {
+  function hydrate(vnode, node) {
     switch (vnode.type) {
       case 0
       /* Text */
@@ -6470,16 +6583,18 @@ var LWC = (function (exports) {
     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 */
+      );
+      var 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;
   }
 
@@ -6487,23 +6602,25 @@ var LWC = (function (exports) {
     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);
     }
 
@@ -6520,13 +6637,13 @@ var LWC = (function (exports) {
       var props = vnode.data.props;
 
       if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-        if (elm.innerHTML === 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 <".concat(elm.tagName.toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), vnode.owner);
+          logWarn("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), vnode.owner);
         }
       }
     }
@@ -6534,19 +6651,19 @@ var LWC = (function (exports) {
     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);
     }
 
     var elm = node;
-    vnode.elm = elm;
     var sel = vnode.sel,
         mode = vnode.mode,
         ctor = vnode.ctor,
@@ -6556,6 +6673,8 @@ var LWC = (function (exports) {
       owner: owner,
       tagName: sel
     });
+    vnode.elm = elm;
+    vnode.vm = vm;
     allocateChildren(vnode, vm);
     patchElementPropsAndAttrs(vnode); // Insert hook section:
 
@@ -6572,7 +6691,7 @@ var LWC = (function (exports) {
     ) {
       // 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);
@@ -6597,7 +6716,7 @@ var LWC = (function (exports) {
 
       if (!isNull(childVnode)) {
         var childNode = elmChildren[childNodeIndex];
-        hydrate$1(childVnode, childNode);
+        hydrate(childVnode, childNode);
         childNodeIndex++;
       }
     }
@@ -6613,15 +6732,15 @@ var LWC = (function (exports) {
   }
 
   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 \"".concat(vnode.sel.toLowerCase(), "\" but found \"").concat(elm.tagName.toLowerCase(), "\"."), vnode.owner);
+    if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
+      logError("Hydration mismatch: expecting element with tag \"".concat(vnode.sel.toLowerCase(), "\" but found \"").concat(getProperty$1(elm, 'tagName').toLowerCase(), "\"."), vnode.owner);
       throwHydrationError();
     }
 
@@ -6649,7 +6768,7 @@ var LWC = (function (exports) {
       var elmAttrValue = getAttribute$1(elm, attrName);
 
       if (String(attrValue) !== elmAttrValue) {
-        logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
+        logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
         nodesAreCompatible = false;
       }
     }
@@ -6664,7 +6783,7 @@ var LWC = (function (exports) {
     var nodesAreCompatible = true;
     var 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;
@@ -6689,7 +6808,7 @@ var LWC = (function (exports) {
     }
 
     if (!nodesAreCompatible) {
-      logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(elm.className, "\""), vnode.owner);
+      logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(getProperty$1(elm, 'className'), "\""), vnode.owner);
     }
 
     return nodesAreCompatible;
@@ -6737,7 +6856,7 @@ var LWC = (function (exports) {
 
     if (!nodesAreCompatible) {
       // style is used when class is bound to an expr.
-      logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
+      logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
     }
 
     return nodesAreCompatible;
@@ -6808,7 +6927,19 @@ var LWC = (function (exports) {
   }
 
   function hydrateVM(vm) {
-    hydrate(vm);
+    if (isTrue(vm.isDirty)) {
+      // manually diffing/patching here.
+      // This routine is:
+      // patchShadowRoot(vm, children);
+      //  -> addVnodes.
+      var children = renderComponent(vm);
+      vm.children = children;
+      var 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.
 
@@ -6951,30 +7082,38 @@ var LWC = (function (exports) {
         /* Native */
         ;
       } else if (isNativeShadowDefined$1) {
-        if (def.shadowSupportMode === "any"
-        /* Any */
-        ) {
-          shadowMode = 0
-          /* Native */
-          ;
-        } else {
-          var shadowAncestor = getNearestShadowAncestor(vm);
-
-          if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
-          /* Native */
+        // Not combined with above condition because @lwc/features only supports identifiers in
+        // the if-condition.
+        if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+          if (def.shadowSupportMode === "any"
+          /* Any */
           ) {
-            // Transitive support for native Shadow DOM. A component in native mode
-            // transitively opts all of its descendants into native.
             shadowMode = 0
             /* Native */
             ;
           } else {
-            // Synthetic if neither this component nor any of its ancestors are configured
-            // to be native.
-            shadowMode = 1
-            /* Synthetic */
-            ;
+            var shadowAncestor = getNearestShadowAncestor(vm);
+
+            if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
+            /* Native */
+            ) {
+              // Transitive support for native Shadow DOM. A component in native mode
+              // transitively opts all of its descendants into native.
+              shadowMode = 0
+              /* Native */
+              ;
+            } else {
+              // Synthetic if neither this component nor any of its ancestors are configured
+              // to be native.
+              shadowMode = 1
+              /* Synthetic */
+              ;
+            }
           }
+        } else {
+          shadowMode = 1
+          /* Synthetic */
+          ;
         }
       } else {
         // Synthetic if there is no native Shadow DOM support.
@@ -7031,22 +7170,6 @@ var LWC = (function (exports) {
     }
   }
 
-  function hydrate(vm) {
-    if (isTrue(vm.isDirty)) {
-      // manually diffing/patching here.
-      // This routine is:
-      // patchShadowRoot(vm, children);
-      //  -> addVnodes.
-      var children = renderComponent(vm);
-      vm.children = children;
-      var vmChildren = vm.renderMode === 0
-      /* Light */
-      ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
-      hydrateChildren(vmChildren, children, vm);
-      runRenderedCallback(vm);
-    }
-  }
-
   function patchShadowRoot(vm, newCh) {
     var renderRoot = vm.renderRoot,
         oldCh = vm.children; // caching the new children collection
@@ -7064,7 +7187,7 @@ var LWC = (function (exports) {
           , vm);
         }, function () {
           // job
-          patchChildren(renderRoot, oldCh, newCh);
+          patchChildren(oldCh, newCh, renderRoot);
         }, function () {
           // post
           logOperationEnd(2
@@ -7125,13 +7248,13 @@ var LWC = (function (exports) {
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i26 = 0, _len9 = vms.length; _i26 < _len9; _i26 += 1) {
+    for (var _i26 = 0, _len8 = vms.length; _i26 < _len8; _i26 += 1) {
       var vm = vms[_i26];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i26 + 1 < _len9) {
+        if (_i26 + 1 < _len8) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
@@ -7276,7 +7399,7 @@ var LWC = (function (exports) {
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i28 = 0, _len10 = vnodes.length; _i28 < _len10; _i28 += 1) {
+    for (var _i28 = 0, _len9 = vnodes.length; _i28 < _len9; _i28 += 1) {
       var vnode = vnodes[_i28];
 
       if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
@@ -7308,7 +7431,7 @@ var LWC = (function (exports) {
     var children = vm.children,
         renderRoot = vm.renderRoot;
 
-    for (var _i29 = 0, _len11 = children.length; _i29 < _len11; _i29++) {
+    for (var _i29 = 0, _len10 = children.length; _i29 < _len10; _i29++) {
       var child = children[_i29];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
@@ -7683,7 +7806,7 @@ var LWC = (function (exports) {
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
 
-    for (var _i30 = 0, _len12 = wiredConnecting.length; _i30 < _len12; _i30 += 1) {
+    for (var _i30 = 0, _len11 = wiredConnecting.length; _i30 < _len11; _i30 += 1) {
       wiredConnecting[_i30]();
     }
   }
@@ -7692,7 +7815,7 @@ var LWC = (function (exports) {
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i31 = 0, _len13 = wiredDisconnecting.length; _i31 < _len13; _i31 += 1) {
+      for (var _i31 = 0, _len12 = wiredDisconnecting.length; _i31 < _len12; _i31 += 1) {
         wiredDisconnecting[_i31]();
       }
     }, noop);
@@ -7703,6 +7826,7 @@ var LWC = (function (exports) {
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // this is lwc internal implementation
 
 
   function createContextProvider(adapter) {
@@ -7783,7 +7907,7 @@ var LWC = (function (exports) {
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.9.0 */
+  /* version: 2.11.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7810,9 +7934,10 @@ var LWC = (function (exports) {
   // See also: https://github.com/whatwg/webidl/issues/1027#issuecomment-934510070
 
   var supportsConstructableStyleSheets = isFunction$1(CSSStyleSheet.prototype.replaceSync) && isArray$1(document.adoptedStyleSheets);
+  var supportsMutableAdoptedStyleSheets = supportsConstructableStyleSheets && getOwnPropertyDescriptor$1(document.adoptedStyleSheets, 'length').writable;
   var styleElements = create(null);
   var styleSheets = create(null);
-  var nodesToStyleSheets = new WeakMap();
+  var shadowRootsToStyleSheets = new WeakMap();
   var getCustomElement;
   var defineCustomElement;
   var HTMLElementConstructor;
@@ -7864,18 +7989,26 @@ var LWC = (function (exports) {
       styleSheets[content] = styleSheet;
     }
 
-    if (!target.adoptedStyleSheets.includes(styleSheet)) {
-      target.adoptedStyleSheets = [].concat(_toConsumableArray(target.adoptedStyleSheets), [styleSheet]);
+    var adoptedStyleSheets = target.adoptedStyleSheets;
+
+    if (!adoptedStyleSheets.includes(styleSheet)) {
+      if (supportsMutableAdoptedStyleSheets) {
+        // This is only supported in later versions of Chromium:
+        // https://chromestatus.com/feature/5638996492288000
+        adoptedStyleSheets.push(styleSheet);
+      } else {
+        target.adoptedStyleSheets = [].concat(_toConsumableArray(adoptedStyleSheets), [styleSheet]);
+      }
     }
   }
 
   function insertStyleElement(content, target) {
     // Avoid inserting duplicate `<style>`s
-    var sheets = nodesToStyleSheets.get(target);
+    var sheets = shadowRootsToStyleSheets.get(target);
 
     if (isUndefined$1(sheets)) {
       sheets = create(null);
-      nodesToStyleSheets.set(target, sheets);
+      shadowRootsToStyleSheets.set(target, sheets);
     }
 
     if (sheets[content]) {
@@ -8165,6 +8298,177 @@ var LWC = (function (exports) {
   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) {
+      var 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 (var _i33 = 0, _Object$entries2 = Object.entries(props); _i33 < _Object$entries2.length; _i33++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i33], 2),
+          key = _Object$entries2$_i[0],
+          value = _Object$entries2$_i[1];
+
+      element[key] = value;
+    }
+  }
+
+  function hydrateComponent(element, Ctor) {
+    var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+    if (!(element instanceof Element)) {
+      throw new TypeError("\"hydrateComponent\" expects a valid DOM element as the first parameter but instead received ".concat(element, "."));
+    }
+
+    if (!isFunction$1(Ctor)) {
+      throw new TypeError("\"hydrateComponent\" expects a valid component constructor as the second parameter but instead received ".concat(Ctor, "."));
+    }
+
+    if (!isObject(props) || isNull(props)) {
+      throw new TypeError("\"hydrateComponent\" expects an object as the third parameter but instead received ".concat(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 \"".concat(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.
+
+
+  var hydratedCustomElements = new WeakSet();
+
+  function buildCustomElementConstructor(Ctor) {
+    var HtmlPrototype = getComponentHtmlPrototype(Ctor);
+    return /*#__PURE__*/function (_HtmlPrototype) {
+      _inherits(_class, _HtmlPrototype);
+
+      var _super8 = _createSuper(_class);
+
+      function _class() {
+        var _this6;
+
+        _classCallCheck(this, _class);
+
+        _this6 = _super8.call(this);
+
+        if (_this6.isConnected) {
+          // this if block is hit when there's already an un-upgraded element in the DOM with the same tag name.
+          hydrateComponent(_assertThisInitialized(_this6), Ctor, {});
+          hydratedCustomElements.add(_assertThisInitialized(_this6));
+        } else {
+          createVM(_assertThisInitialized(_this6), Ctor, {
+            mode: 'open',
+            owner: null,
+            tagName: _this6.tagName
+          });
+        }
+
+        return _this6;
+      }
+
+      _createClass(_class, [{
+        key: "connectedCallback",
+        value: function connectedCallback() {
+          if (hydratedCustomElements.has(this)) {
+            // This is an un-upgraded element that was hydrated in the constructor.
+            hydratedCustomElements.delete(this);
+          } else {
+            connectRootElement(this);
+          }
+        }
+      }, {
+        key: "disconnectedCallback",
+        value: function disconnectedCallback() {
+          disconnectRootElement(this);
+        }
+      }]);
+
+      return _class;
+    }(HtmlPrototype);
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -8174,6 +8478,7 @@ var LWC = (function (exports) {
   // TODO [#2472]: Remove this workaround when appropriate.
   // eslint-disable-next-line lwc-internal/no-global-node
 
+
   var _Node$1 = Node;
   var ConnectingSlot = new WeakMap();
   var DisconnectingSlot = new WeakMap();
@@ -8281,142 +8586,6 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-
-  function hydrateComponent(element, Ctor) {
-    var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-    if (!(element instanceof Element)) {
-      throw new TypeError("\"hydrateComponent\" expects a valid DOM element as the first parameter but instead received ".concat(element, "."));
-    }
-
-    if (!isFunction$1(Ctor)) {
-      throw new TypeError("\"hydrateComponent\" expects a valid component constructor as the second parameter but instead received ".concat(Ctor, "."));
-    }
-
-    if (!isObject(props) || isNull(props)) {
-      throw new TypeError("\"hydrateComponent\" expects an object as the third parameter but instead received ".concat(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 (var _i33 = 0, _Object$entries2 = Object.entries(props); _i33 < _Object$entries2.length; _i33++) {
-        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i33], 2),
-            key = _Object$entries2$_i[0],
-            value = _Object$entries2$_i[1];
-
-        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);
-      var newElem = createElement(element.tagName, {
-        is: Ctor,
-        mode: 'open'
-      });
-
-      for (var _i34 = 0, _Object$entries3 = Object.entries(props); _i34 < _Object$entries3.length; _i34++) {
-        var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i34], 2),
-            _key3 = _Object$entries3$_i[0],
-            _value2 = _Object$entries3$_i[1];
-
-        newElem[_key3] = _value2;
-      }
-
-      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 \"".concat(Ctor.name, ".CustomElementConstructor\" static property of the component constructor to access the corresponding custom element constructor instead."));
-    }
-
-    return Ctor.CustomElementConstructor;
-  }
-
-  function buildCustomElementConstructor(Ctor) {
-    var HtmlPrototype = getComponentHtmlPrototype(Ctor);
-    return /*#__PURE__*/function (_HtmlPrototype) {
-      _inherits(_class, _HtmlPrototype);
-
-      var _super8 = _createSuper(_class);
-
-      function _class() {
-        var _this6;
-
-        _classCallCheck(this, _class);
-
-        _this6 = _super8.call(this);
-        createVM(_assertThisInitialized(_this6), Ctor, {
-          mode: 'open',
-          owner: null,
-          tagName: _this6.tagName
-        });
-        return _this6;
-      }
-
-      _createClass(_class, [{
-        key: "connectedCallback",
-        value: function connectedCallback() {
-          connectRootElement(this);
-        }
-      }, {
-        key: "disconnectedCallback",
-        value: function disconnectedCallback() {
-          disconnectRootElement(this);
-        }
-      }]);
-
-      return _class;
-    }(HtmlPrototype);
-  }
-  /*
-   * 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.
@@ -8516,7 +8685,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.9.0 */
+  /* version: 2.11.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;