lwc 2.8.0 → 2.11.0

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.8.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.0";
+  var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
+  /** version: 2.11.0 */
 
   /*
    * 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.8.0 */
+  /** version: 2.11.0 */
 
   /* proxy-compat-disable */
 
@@ -617,6 +628,46 @@ var LWC = (function (exports) {
     }
 
     return styleMap;
+  } // Make a shallow copy of an object but omit the given key
+
+
+  function cloneAndOmitKey(object, keyToOmit) {
+    var result = {};
+
+    for (var _i4 = 0, _Object$keys = Object.keys(object); _i4 < _Object$keys.length; _i4++) {
+      var key = _Object$keys[_i4];
+
+      if (key !== keyToOmit) {
+        result[key] = object[key];
+      }
+    }
+
+    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
   //
@@ -892,8 +943,8 @@ var LWC = (function (exports) {
       var reactiveObservers = reactiveRecord[key];
 
       if (!isUndefined$1(reactiveObservers)) {
-        for (var _i4 = 0, _len2 = reactiveObservers.length; _i4 < _len2; _i4 += 1) {
-          var ro = reactiveObservers[_i4];
+        for (var _i5 = 0, _len2 = reactiveObservers.length; _i5 < _len2; _i5 += 1) {
+          var ro = reactiveObservers[_i5];
           ro.notify();
         }
       }
@@ -962,9 +1013,9 @@ var LWC = (function (exports) {
         var len = listeners.length;
 
         if (len > 0) {
-          for (var _i5 = 0; _i5 < len; _i5 += 1) {
-            var set = listeners[_i5];
-            var pos = ArrayIndexOf.call(listeners[_i5], this);
+          for (var _i6 = 0; _i6 < len; _i6 += 1) {
+            var set = listeners[_i6];
+            var pos = ArrayIndexOf.call(listeners[_i6], this);
             ArraySplice.call(set, pos, 1);
           }
 
@@ -1112,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'];
 
@@ -2746,7 +2798,7 @@ var LWC = (function (exports) {
 
 
   var _loop = function _loop() {
-    var childGetter = _childGetters[_i6];
+    var childGetter = _childGetters[_i7];
     queryAndChildGetterDescriptors[childGetter] = {
       get: function get() {
         var vm = getAssociatedVM(this);
@@ -2763,7 +2815,7 @@ var LWC = (function (exports) {
     };
   };
 
-  for (var _i6 = 0, _childGetters = childGetters; _i6 < _childGetters.length; _i6++) {
+  for (var _i7 = 0, _childGetters = childGetters; _i7 < _childGetters.length; _i7++) {
     _loop();
   }
 
@@ -2787,7 +2839,7 @@ var LWC = (function (exports) {
 
 
   var _loop2 = function _loop2() {
-    var queryMethod = _queryMethods[_i7];
+    var queryMethod = _queryMethods[_i8];
     queryAndChildGetterDescriptors[queryMethod] = {
       value: function value(arg) {
         var vm = getAssociatedVM(this);
@@ -2805,7 +2857,7 @@ var LWC = (function (exports) {
     };
   };
 
-  for (var _i7 = 0, _queryMethods = queryMethods; _i7 < _queryMethods.length; _i7++) {
+  for (var _i8 = 0, _queryMethods = queryMethods; _i8 < _queryMethods.length; _i8++) {
     _loop2();
   }
 
@@ -3328,8 +3380,8 @@ var LWC = (function (exports) {
     }
 
     if (!isUndefined$1(fields)) {
-      for (var _i8 = 0, n = fields.length; _i8 < n; _i8++) {
-        var _fieldName2 = fields[_i8];
+      for (var _i9 = 0, n = fields.length; _i9 < n; _i9++) {
+        var _fieldName2 = fields[_i9];
         descriptor = getOwnPropertyDescriptor$1(proto, _fieldName2);
 
         if (process.env.NODE_ENV !== 'production') {
@@ -3377,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();
 
@@ -3396,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
 
@@ -3418,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:
@@ -3550,8 +3649,8 @@ var LWC = (function (exports) {
         superObservedAttributes = _SuperClass$observedA === void 0 ? [] : _SuperClass$observedA;
     var descriptors = create(null); // expose getters and setters for each public props on the new Element Bridge
 
-    for (var _i9 = 0, _len3 = props.length; _i9 < _len3; _i9 += 1) {
-      var _propName2 = props[_i9];
+    for (var _i10 = 0, _len3 = props.length; _i10 < _len3; _i10 += 1) {
+      var _propName2 = props[_i10];
       attributeToPropMap[htmlPropertyToAttribute(_propName2)] = _propName2;
       descriptors[_propName2] = {
         get: createGetter(_propName2),
@@ -3562,8 +3661,8 @@ var LWC = (function (exports) {
     } // expose public methods as props on the new Element Bridge
 
 
-    for (var _i10 = 0, _len4 = methods.length; _i10 < _len4; _i10 += 1) {
-      var methodName = methods[_i10];
+    for (var _i11 = 0, _len4 = methods.length; _i11 < _len4; _i11 += 1) {
+      var methodName = methods[_i11];
       descriptors[methodName] = {
         value: createMethodCaller(methodName),
         writable: true,
@@ -3691,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
@@ -4427,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) {
@@ -4471,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.
 
@@ -4495,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.
 
@@ -4507,8 +4584,8 @@ var LWC = (function (exports) {
       return;
     }
 
-    for (var _i11 = 0; _i11 < styleDecls.length; _i11++) {
-      var _styleDecls$_i = _slicedToArray(styleDecls[_i11], 3),
+    for (var _i12 = 0; _i12 < styleDecls.length; _i12++) {
+      var _styleDecls$_i = _slicedToArray(styleDecls[_i12], 3),
           prop = _styleDecls$_i[0],
           value = _styleDecls$_i[1],
           important = _styleDecls$_i[2];
@@ -4524,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;
 
-      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 1
+      /* Comment */
+      :
+        patchComment(n1, n2);
+        break;
 
+      case 2
+      /* Element */
+      :
+        patchElement(n1, n2);
+        break;
 
-      patchChildren(vnode.elm, oldVnode.children, vnode.children);
+      case 3
+      /* CustomElement */
+      :
+        patchCustomElement(n1, n2);
+        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.
+  function mount(node, parent, anchor) {
+    switch (node.type) {
+      case 0
+      /* Text */
+      :
+        mountText(node, parent, anchor);
+        break;
 
+      case 1
+      /* Comment */
+      :
+        mountComment(node, parent, anchor);
+        break;
 
-        rerenderVM(vm);
-      }
-    },
-    insert: function insert(vnode, parentNode, referenceNode) {
-      insertNode(vnode, parentNode, referenceNode);
-      var vm = getAssociatedVMIfPresent(vnode.elm);
+      case 2
+      /* Element */
+      :
+        mountElement(node, parent, anchor);
+        break;
 
-      if (vm) {
-        if (process.env.NODE_ENV !== 'production') {
-          assert.isTrue(vm.state === 0
-          /* created */
-          , "".concat(vm, " cannot be recycled."));
-        }
+      case 3
+      /* CustomElement */
+      :
+        mountCustomElement(node, parent, anchor);
+        break;
+    }
+  }
+
+  function patchText(n1, n2) {
+    n2.elm = n1.elm;
+
+    if (n2.text !== n1.text) {
+      updateTextContent(n2);
+    }
+  }
+
+  function mountText(node, parent, anchor) {
+    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.
+     */
+
+    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");
+    }
 
-        runConnectedCallback(vm);
+    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);
+    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
+
+
+    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;
+
+    for (; start < end; ++start) {
+      var ch = vnodes[start];
 
-      if (vm) {
-        // for custom elements we don't have to go recursively because the removeVM routine
-        // will take care of disconnecting any child VM attached to its shadow as well.
-        removeVM(vm);
+      if (isVNode(ch)) {
+        unmount(ch, parent, doRemove);
       }
     }
-  };
+  }
 
   function isVNode(vnode) {
     return vnode != null;
@@ -4704,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();
@@ -4775,11 +4966,13 @@ var LWC = (function (exports) {
       ) {
         // this element will now accept any manual content inserted into it
         observeElementChildNodes(elm);
-      } // when running in synthetic shadow mode, we need to set the shadowToken value
-      // into each element from the template, so they can be styled accordingly.
-
+      }
 
-      setElementShadowToken(elm, stylesheetToken);
+      if (!isUndefined$1(stylesheetToken)) {
+        // when running in synthetic shadow mode, we need to set the shadowToken value
+        // into each element from the template, so they can be styled accordingly.
+        setElementShadowToken(elm, stylesheetToken);
+      }
     }
 
     if (process.env.NODE_ENV !== 'production') {
@@ -4797,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.
@@ -4856,7 +5041,9 @@ var LWC = (function (exports) {
       var stylesheetToken = owner.context.stylesheetToken; // when running in synthetic shadow mode, we need to set the shadowToken value
       // into each element from the template, so they can be styled accordingly.
 
-      setElementShadowToken(elm, stylesheetToken);
+      if (!isUndefined$1(stylesheetToken)) {
+        setElementShadowToken(elm, stylesheetToken);
+      }
     }
 
     vm = createVM(elm, ctor, {
@@ -4872,44 +5059,14 @@ 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;
 
     var oldSlots = vm.cmpSlots;
     var cmpSlots = vm.cmpSlots = create(null);
 
-    for (var _i12 = 0, _len6 = children.length; _i12 < _len6; _i12 += 1) {
-      var vnode = children[_i12];
+    for (var _i13 = 0, _len5 = children.length; _i13 < _len5; _i13 += 1) {
+      var vnode = children[_i13];
 
       if (isNull(vnode)) {
         continue;
@@ -4943,8 +5100,8 @@ var LWC = (function (exports) {
         return;
       }
 
-      for (var _i13 = 0, _len7 = oldKeys.length; _i13 < _len7; _i13 += 1) {
-        var key = oldKeys[_i13];
+      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) {
           markComponentAsDirty(vm);
@@ -4994,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;
@@ -5029,6 +5165,7 @@ var LWC = (function (exports) {
     var idxInOld;
     var elmToMove;
     var before;
+    var clonedOldCh = false;
 
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
       if (!isVNode(oldStartVnode)) {
@@ -5040,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 {
@@ -5068,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];
@@ -5077,12 +5213,22 @@ 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);
+              patch(elmToMove, newStartVnode); // Delete the old child, but copy the array since it is read-only.
+              // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
+              // so we only care about the `oldCh` object inside this function.
+              // To avoid cloning over and over again, we check `clonedOldCh`
+              // and only clone once.
+
+              if (!clonedOldCh) {
+                clonedOldCh = true;
+                oldCh = _toConsumableArray(oldCh);
+              } // We've already cloned at least once, so it's no longer read-only
+
+
               oldCh[idxInOld] = undefined;
-              newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
+              insertNode(elmToMove.elm, parent, oldStartVnode.elm);
             }
           }
 
@@ -5095,73 +5241,63 @@ var LWC = (function (exports) {
       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.
-        var _i14 = newEndIdx;
+        var _i15 = newEndIdx;
         var n;
 
         do {
-          n = newCh[++_i14];
-        } while (!isVNode(n) && _i14 < newChEnd);
+          n = newCh[++_i15];
+        } 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 _i15 = newChLength - 1; _i15 >= 0; _i15 -= 1) {
-      var vnode = newCh[_i15];
-      var oldVNode = oldCh[_i15];
+    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.
@@ -5177,7 +5313,8 @@ var LWC = (function (exports) {
   } // [h]tml node
 
 
-  function h(sel, data, children) {
+  function h(sel, data) {
+    var children = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EmptyArray;
     var vmBeingRendered = getVMBeingRendered();
 
     if (process.env.NODE_ENV !== 'production') {
@@ -5211,7 +5348,6 @@ var LWC = (function (exports) {
       children: children,
       elm: elm,
       key: key,
-      hook: ElementHook,
       owner: vmBeingRendered
     };
   } // [t]ab[i]ndex function
@@ -5295,7 +5431,7 @@ var LWC = (function (exports) {
     }
 
     var key = data.key;
-    var elm;
+    var elm, aChildren, vm;
     var vnode = {
       type: 3
       /* CustomElement */
@@ -5305,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;
@@ -5436,7 +5572,6 @@ var LWC = (function (exports) {
       text: text,
       elm: elm,
       key: key,
-      hook: TextHook,
       owner: getVMBeingRendered()
     };
   } // [co]mment node
@@ -5452,7 +5587,6 @@ var LWC = (function (exports) {
       text: text,
       elm: elm,
       key: key,
-      hook: CommentHook,
       owner: getVMBeingRendered()
     };
   } // [d]ynamic text
@@ -5565,7 +5699,9 @@ var LWC = (function (exports) {
    * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
    */
 
-  function dc(sel, Ctor, data, children) {
+  function dc(sel, Ctor, data) {
+    var children = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : EmptyArray;
+
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(isString(sel), "dc() 1st argument sel must be a string.");
       assert.isTrue(isObject(data), "dc() 3nd argument data must be an object.");
@@ -5589,10 +5725,14 @@ var LWC = (function (exports) {
     } // the new vnode key is a mix of idx and compiler key, this is required by the diffing algo
     // to identify different constructors as vnodes with different keys to avoid reusing the
     // element used for previous constructors.
+    // Shallow clone is necessary here becuase VElementData may be shared across VNodes due to
+    // hoisting optimization.
 
 
-    data.key = "dc:".concat(idx, ":").concat(data.key);
-    return c(sel, Ctor, data, children);
+    var newData = Object.assign(Object.assign({}, data), {
+      key: "dc:".concat(idx, ":").concat(data.key)
+    });
+    return c(sel, Ctor, newData, children);
   }
   /**
    * slow children collection marking mechanism. this API allows the compiler to signal
@@ -5704,12 +5844,14 @@ var LWC = (function (exports) {
         oldHasTokenInClass = context.hasTokenInClass,
         oldHasTokenInAttribute = context.hasTokenInAttribute;
 
-    if (oldHasTokenInClass) {
-      getClassList$1(elm).remove(makeHostToken(oldToken));
-    }
+    if (!isUndefined$1(oldToken)) {
+      if (oldHasTokenInClass) {
+        getClassList$1(elm).remove(makeHostToken(oldToken));
+      }
 
-    if (oldHasTokenInAttribute) {
-      removeAttribute$1(elm, makeHostToken(oldToken));
+      if (oldHasTokenInAttribute) {
+        removeAttribute$1(elm, makeHostToken(oldToken));
+      }
     } // Apply the new template styling token to the host element, if the new template has any
     // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
@@ -5741,16 +5883,18 @@ var LWC = (function (exports) {
     var content = [];
     var root;
 
-    for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
-      var stylesheet = stylesheets[_i16];
+    for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
+      var stylesheet = stylesheets[_i17];
 
       if (isArray$1(stylesheet)) {
         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);
         }
 
@@ -5852,8 +5996,8 @@ var LWC = (function (exports) {
     && shadowMode === 1
     /* Synthetic */
     ) {
-      for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
-        insertGlobalStylesheet$1(stylesheets[_i17]);
+      for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
+        insertGlobalStylesheet$1(stylesheets[_i18]);
       }
     } else if (ssr$1 || isHydrating$1()) {
       // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
@@ -5867,12 +6011,12 @@ var LWC = (function (exports) {
       var root = getNearestNativeShadowComponent(vm);
       var isGlobal = isNull(root);
 
-      for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
+      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
         if (isGlobal) {
-          insertGlobalStylesheet$1(stylesheets[_i18]);
+          insertGlobalStylesheet$1(stylesheets[_i19]);
         } else {
           // local level
-          insertStylesheet$1(stylesheets[_i18], root.shadowRoot);
+          insertStylesheet$1(stylesheets[_i19], root.shadowRoot);
         }
       }
     }
@@ -6149,8 +6293,8 @@ var LWC = (function (exports) {
     var stylesheets = template.stylesheets;
 
     if (!isUndefined$1(stylesheets)) {
-      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
-        if (isTrue(stylesheets[_i19][KEY__SCOPED_CSS])) {
+      for (var _i20 = 0; _i20 < stylesheets.length; _i20++) {
+        if (isTrue(stylesheets[_i20][KEY__SCOPED_CSS])) {
           return true;
         }
       }
@@ -6277,6 +6421,11 @@ var LWC = (function (exports) {
 
   function registerComponent(Ctor, _ref2) {
     var tmpl = _ref2.tmpl;
+
+    if (process.env.NODE_ENV !== 'production') {
+      checkVersionMismatch(Ctor, 'component');
+    }
+
     signedTemplateMap.set(Ctor, tmpl); // chaining this method as a way to wrap existing assignment of component constructor easily,
     // without too much transformation
 
@@ -6362,8 +6511,8 @@ var LWC = (function (exports) {
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
 
-    for (var _i20 = 0; _i20 < hooks.length; ++_i20) {
-      var hookName = hooks[_i20];
+    for (var _i21 = 0; _i21 < hooks.length; ++_i21) {
+      var hookName = hooks[_i21];
 
       if (hookName in service) {
         var l = Services[hookName];
@@ -6386,8 +6535,8 @@ var LWC = (function (exports) {
         def = vm.def,
         context = vm.context;
 
-    for (var _i21 = 0, _len8 = cbs.length; _i21 < _len8; ++_i21) {
-      cbs[_i21].call(undefined, component, {}, def, context);
+    for (var _i22 = 0, _len7 = cbs.length; _i22 < _len7; ++_i22) {
+      cbs[_i22].call(undefined, component, {}, def, context);
     }
   }
   /*
@@ -6398,7 +6547,7 @@ var LWC = (function (exports) {
    */
 
 
-  function hydrate$1(vnode, node) {
+  function hydrate(vnode, node) {
     switch (vnode.type) {
       case 0
       /* Text */
@@ -6430,16 +6579,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;
   }
 
@@ -6447,23 +6598,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);
     }
 
@@ -6480,10 +6633,13 @@ var LWC = (function (exports) {
       var props = vnode.data.props;
 
       if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-        if (elm.innerHTML === props.innerHTML) {
-          delete props.innerHTML;
+        if (getProperty$1(elm, 'innerHTML') === props.innerHTML) {
+          // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+          vnode.data = Object.assign(Object.assign({}, vnode.data), {
+            props: cloneAndOmitKey(props, 'innerHTML')
+          });
         } else {
-          logWarn("Mismatch hydrating element <".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);
         }
       }
     }
@@ -6491,19 +6647,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,
@@ -6513,6 +6669,8 @@ var LWC = (function (exports) {
       owner: owner,
       tagName: sel
     });
+    vnode.elm = elm;
+    vnode.vm = vm;
     allocateChildren(vnode, vm);
     patchElementPropsAndAttrs(vnode); // Insert hook section:
 
@@ -6529,7 +6687,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);
@@ -6549,12 +6707,12 @@ var LWC = (function (exports) {
 
     var childNodeIndex = 0;
 
-    for (var _i22 = 0; _i22 < children.length; _i22++) {
-      var childVnode = children[_i22];
+    for (var _i23 = 0; _i23 < children.length; _i23++) {
+      var childVnode = children[_i23];
 
       if (!isNull(childVnode)) {
         var childNode = elmChildren[childNodeIndex];
-        hydrate$1(childVnode, childNode);
+        hydrate(childVnode, childNode);
         childNodeIndex++;
       }
     }
@@ -6570,15 +6728,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();
     }
 
@@ -6598,15 +6756,15 @@ var LWC = (function (exports) {
     var nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
 
-    for (var _i23 = 0, _Object$entries = Object.entries(attrs); _i23 < _Object$entries.length; _i23++) {
-      var _Object$entries$_i = _slicedToArray(_Object$entries[_i23], 2),
+    for (var _i24 = 0, _Object$entries = Object.entries(attrs); _i24 < _Object$entries.length; _i24++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i24], 2),
           attrName = _Object$entries$_i[0],
           attrValue = _Object$entries$_i[1];
 
       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;
       }
     }
@@ -6621,7 +6779,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;
@@ -6646,7 +6804,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;
@@ -6667,8 +6825,8 @@ var LWC = (function (exports) {
       var parsedVnodeStyle = parseStyleText(elmStyle);
       var expectedStyle = []; // styleMap is used when style is set to static value.
 
-      for (var _i24 = 0, n = styleDecls.length; _i24 < n; _i24++) {
-        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i24], 3),
+      for (var _i25 = 0, n = styleDecls.length; _i25 < n; _i25++) {
+        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i25], 3),
             prop = _styleDecls$_i2[0],
             value = _styleDecls$_i2[1],
             important = _styleDecls$_i2[2];
@@ -6694,7 +6852,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;
@@ -6765,7 +6923,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.
 
@@ -6908,30 +7078,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.
@@ -6988,22 +7166,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
@@ -7021,7 +7183,7 @@ var LWC = (function (exports) {
           , vm);
         }, function () {
           // job
-          patchChildren(renderRoot, oldCh, newCh);
+          patchChildren(oldCh, newCh, renderRoot);
         }, function () {
           // post
           logOperationEnd(2
@@ -7082,19 +7244,19 @@ var LWC = (function (exports) {
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i25 = 0, _len9 = vms.length; _i25 < _len9; _i25 += 1) {
-      var vm = vms[_i25];
+    for (var _i26 = 0, _len8 = vms.length; _i26 < _len8; _i26 += 1) {
+      var vm = vms[_i26];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i25 + 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);
           }
 
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i25 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i26 + 1));
         } // we need to end the measure before throwing.
 
 
@@ -7198,8 +7360,8 @@ var LWC = (function (exports) {
     var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
 
-    for (var _i26 = vCustomElementCollection.length - 1; _i26 >= 0; _i26 -= 1) {
-      var elm = vCustomElementCollection[_i26].elm; // There are two cases where the element could be undefined:
+    for (var _i27 = vCustomElementCollection.length - 1; _i27 >= 0; _i27 -= 1) {
+      var elm = vCustomElementCollection[_i27].elm; // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
       //   is not properly initialized, and therefore is should be ignored.
@@ -7233,8 +7395,8 @@ var LWC = (function (exports) {
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i27 = 0, _len10 = vnodes.length; _i27 < _len10; _i27 += 1) {
-      var vnode = vnodes[_i27];
+    for (var _i28 = 0, _len9 = vnodes.length; _i28 < _len9; _i28 += 1) {
+      var vnode = vnodes[_i28];
 
       if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
         switch (vnode.type) {
@@ -7265,8 +7427,8 @@ var LWC = (function (exports) {
     var children = vm.children,
         renderRoot = vm.renderRoot;
 
-    for (var _i28 = 0, _len11 = children.length; _i28 < _len11; _i28++) {
-      var child = children[_i28];
+    for (var _i29 = 0, _len10 = children.length; _i29 < _len10; _i29++) {
+      var child = children[_i29];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
         remove$1(child.elm, renderRoot);
@@ -7640,8 +7802,8 @@ var LWC = (function (exports) {
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
 
-    for (var _i29 = 0, _len12 = wiredConnecting.length; _i29 < _len12; _i29 += 1) {
-      wiredConnecting[_i29]();
+    for (var _i30 = 0, _len11 = wiredConnecting.length; _i30 < _len11; _i30 += 1) {
+      wiredConnecting[_i30]();
     }
   }
 
@@ -7649,8 +7811,8 @@ var LWC = (function (exports) {
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i30 = 0, _len13 = wiredDisconnecting.length; _i30 < _len13; _i30 += 1) {
-        wiredDisconnecting[_i30]();
+      for (var _i31 = 0, _len12 = wiredDisconnecting.length; _i31 < _len12; _i31 += 1) {
+        wiredDisconnecting[_i31]();
       }
     }, noop);
   }
@@ -7660,6 +7822,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) {
@@ -7740,7 +7903,7 @@ var LWC = (function (exports) {
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.8.0 */
+  /* version: 2.11.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7755,8 +7918,8 @@ var LWC = (function (exports) {
   if (process.env.NODE_ENV === 'development') {
     // @ts-ignore
     window.__lwcResetGlobalStylesheets = function () {
-      for (var _i31 = 0, _Object$keys = Object.keys(globalStylesheets); _i31 < _Object$keys.length; _i31++) {
-        var key = _Object$keys[_i31];
+      for (var _i32 = 0, _Object$keys2 = Object.keys(globalStylesheets); _i32 < _Object$keys2.length; _i32++) {
+        var key = _Object$keys2[_i32];
         delete globalStylesheets[key];
       }
     };
@@ -7767,9 +7930,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;
@@ -7821,18 +7985,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]) {
@@ -8122,6 +8294,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.
@@ -8131,6 +8474,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();
@@ -8238,142 +8582,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 _i32 = 0, _Object$entries2 = Object.entries(props); _i32 < _Object$entries2.length; _i32++) {
-        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i32], 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 _i33 = 0, _Object$entries3 = Object.entries(props); _i33 < _Object$entries3.length; _i33++) {
-        var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i33], 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.
@@ -8405,30 +8613,31 @@ var LWC = (function (exports) {
 
   var _Node = Node;
   /**
-   * EXPERIMENTAL: This function detects whether or not a Node is controlled by a LWC template. This
-   * API is subject to change or being removed.
+   * EXPERIMENTAL: The purpose of this function is to detect shadowed nodes. THIS API WILL BE REMOVED
+   * ONCE LOCKER V1 IS NO LONGER SUPPORTED.
    */
 
-  function isNodeFromTemplate(node) {
+  function isNodeShadowed(node) {
     if (isFalse(node instanceof _Node)) {
       return false;
-    } // TODO [#1250]: skipping the shadowRoot instances itself makes no sense, we need to revisit
-    // this with locker
+    } // It's debatable whether shadow root instances should be considered as shadowed, but we keep
+    // this unchanged for legacy reasons (#1250).
 
 
     if (node instanceof ShadowRoot) {
       return false;
     }
 
-    if (isSyntheticShadowDefined) {
-      // TODO [#1252]: old behavior that is still used by some pieces of the platform,
-      // specifically, nodes inserted manually on places where `lwc:dom="manual"` directive is not
-      // used, will be considered global elements.
-      return !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
-    }
+    var rootNode = node.getRootNode(); // Handle the native case. We can return early here because an invariant of LWC is that
+    // synthetic roots cannot be descendants of native roots.
+
+    if (rootNode instanceof ShadowRoot && isFalse(hasOwnProperty$1.call(getPrototypeOf$1(rootNode), 'synthetic'))) {
+      return true;
+    } // TODO [#1252]: Old behavior that is still used by some pieces of the platform. Manually
+    // inserted nodes without the `lwc:dom=manual` directive will be considered as global elements.
+
 
-    var root = node.getRootNode();
-    return root instanceof ShadowRoot;
+    return isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8472,7 +8681,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.8.0 */
+  /* version: 2.11.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -8484,7 +8693,7 @@ var LWC = (function (exports) {
   exports.getComponentDef = getComponentDef;
   exports.hydrateComponent = hydrateComponent;
   exports.isComponentConstructor = isComponentConstructor;
-  exports.isNodeFromTemplate = isNodeFromTemplate;
+  exports.isNodeFromTemplate = isNodeShadowed;
   exports.readonly = readonly;
   exports.register = register;
   exports.registerComponent = registerComponent;