lwc 2.22.0 → 2.23.2

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

@@ -305,9 +305,13 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  const LWC_VERSION = "2.22.0";
+  const LWC_VERSION = "2.23.2";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.22.0 */
+  /** version: 2.23.2 */
+
+  /**
+   * Copyright (C) 2018 salesforce.com, inc.
+   */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -316,7 +320,7 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   function detect(propName) {
-      return Object.getOwnPropertyDescriptor(Element.prototype, propName) === undefined;
+      return getOwnPropertyDescriptor$1(Element.prototype, propName) === undefined;
   }
 
   /*
@@ -385,6 +389,7 @@
           patch$1(propName);
       }
   }
+  /** version: 2.23.2 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -404,6 +409,7 @@
       ENABLE_HTML_COLLECTIONS_PATCH: null,
       ENABLE_INNER_OUTER_TEXT_PATCH: null,
       ENABLE_MIXED_SHADOW_MODE: null,
+      ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: null,
       ENABLE_NODE_LIST_PATCH: null,
       ENABLE_NODE_PATCH: null,
       ENABLE_REACTIVE_SETTER: null,
@@ -412,7 +418,7 @@
   if (!_globalThis.lwcRuntimeFlags) {
       Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
   }
-  const runtimeFlags = _globalThis.lwcRuntimeFlags;
+  const lwcRuntimeFlags = _globalThis.lwcRuntimeFlags;
   /**
    * Set the value at runtime of a given feature flag. This method only be invoked once per feature
    * flag. It is meant to be used during the app initialization.
@@ -439,17 +445,17 @@
       }
       if (process.env.NODE_ENV !== 'production') {
           // Allow the same flag to be set more than once outside of production to enable testing
-          runtimeFlags[name] = value;
+          lwcRuntimeFlags[name] = value;
       }
       else {
           // Disallow the same flag to be set more than once in production
-          const runtimeValue = runtimeFlags[name];
+          const runtimeValue = lwcRuntimeFlags[name];
           if (!isUndefined$1(runtimeValue)) {
               // eslint-disable-next-line no-console
               console.error(`Failed to set the value "${value}" for the runtime feature flag "${name}". "${name}" has already been set with the value "${runtimeValue}".`);
               return;
           }
-          defineProperty(runtimeFlags, name, { value });
+          defineProperty(lwcRuntimeFlags, name, { value });
       }
   }
   /**
@@ -461,7 +467,7 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.22.0 */
+  /** version: 2.23.2 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -475,7 +481,7 @@
     window.addEventListener('test-dummy-flag', () => {
       let hasFlag = false;
 
-      if (runtimeFlags.DUMMY_TEST_FLAG) {
+      if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
         hasFlag = true;
       }
 
@@ -502,7 +508,7 @@
     window.addEventListener('test-dummy-flag', () => {
       let hasFlag = false;
 
-      if (runtimeFlags.DUMMY_TEST_FLAG) {
+      if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
         hasFlag = true;
       }
 
@@ -810,8 +816,8 @@
    */
   // This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
   // to inject at runtime.
-  const HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () { };
-  const HTMLElementPrototype = HTMLElementConstructor$1.prototype;
+  const HTMLElementConstructor = typeof HTMLElement !== 'undefined' ? HTMLElement : function () { };
+  const HTMLElementPrototype = HTMLElementConstructor.prototype;
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1266,6 +1272,14 @@
       defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
   }
 
+  function updateComponentValue(vm, key, newValue) {
+      const { cmpFields } = vm;
+      if (newValue !== cmpFields[key]) {
+          cmpFields[key] = newValue;
+          componentValueMutated(vm, key);
+      }
+  }
+
   /**
    * Copyright (C) 2017 salesforce.com, inc.
    */
@@ -1898,10 +1912,7 @@
                   assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
                   assert.invariant(!isObject(newValue) || isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
               }
-              if (newValue !== vm.cmpProps[propName]) {
-                  vm.cmpProps[propName] = newValue;
-                  componentValueMutated(vm, propName);
-              }
+              updateComponentValue(vm, propName, newValue);
               return set.call(vm.elm, newValue);
           },
       };
@@ -2196,10 +2207,7 @@
           },
           set(newValue) {
               const vm = getAssociatedVM(this);
-              if (newValue !== vm.cmpFields[key]) {
-                  vm.cmpFields[key] = newValue;
-                  componentValueMutated(vm, key);
-              }
+              updateComponentValue(vm, key, newValue);
           },
           enumerable: true,
           configurable: true,
@@ -2328,7 +2336,7 @@
         }
 
         if (set) {
-          if (runtimeFlags.ENABLE_REACTIVE_SETTER) {
+          if (lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
             let ro = vm.oar[key];
 
             if (isUndefined$1(ro)) {
@@ -2386,10 +2394,7 @@
                   assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
               }
               const reactiveOrAnyValue = getReactiveProxy(newValue);
-              if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-                  vm.cmpFields[key] = reactiveOrAnyValue;
-                  componentValueMutated(vm, key);
-              }
+              updateComponentValue(vm, key, reactiveOrAnyValue);
           },
           enumerable: true,
           configurable: true,
@@ -2428,10 +2433,7 @@
                * letting the author to do the wrong thing, but it will keep our
                * system to be backward compatible.
                */
-              if (value !== vm.cmpFields[key]) {
-                  vm.cmpFields[key] = value;
-                  componentValueMutated(vm, key);
-              }
+              updateComponentValue(vm, key, value);
           },
           enumerable: true,
           configurable: true,
@@ -2892,7 +2894,7 @@
       defineProperties(HTMLBridgeElement.prototype, descriptors);
       return HTMLBridgeElement;
   }
-  const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor$1, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+  const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
   freeze(BaseBridgeElement);
   seal(BaseBridgeElement.prototype);
 
@@ -2986,7 +2988,7 @@
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       const visited = new Set();
 
       while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
@@ -3003,7 +3005,7 @@
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       const visited = new Set();
 
       while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
@@ -3020,7 +3022,7 @@
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       const visited = new Set();
 
       while (swappedStyleMap.has(style) && !visited.has(style)) {
@@ -3037,7 +3039,7 @@
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       // tracking active component
       const Ctor = vm.def.ctor;
       let componentVMs = activeComponents.get(Ctor);
@@ -3094,7 +3096,7 @@
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       // tracking inactive component
       const Ctor = vm.def.ctor;
       let list = activeComponents.get(Ctor);
@@ -3141,7 +3143,7 @@
       }
     }
 
-    if (!runtimeFlags.ENABLE_HMR) {
+    if (!lwcRuntimeFlags.ENABLE_HMR) {
       throw new Error('HMR is not enabled');
     }
 
@@ -3157,7 +3159,7 @@
       }
     }
 
-    if (!runtimeFlags.ENABLE_HMR) {
+    if (!lwcRuntimeFlags.ENABLE_HMR) {
       throw new Error('HMR is not enabled');
     }
 
@@ -3171,7 +3173,7 @@
       return rehydrateHotStyle(oldStyle);
     }
 
-    if (!runtimeFlags.ENABLE_HMR) {
+    if (!lwcRuntimeFlags.ENABLE_HMR) {
       throw new Error('HMR is not enabled');
     }
 
@@ -3520,13 +3522,13 @@
       return owner;
   }
   function createStylesheet(vm, stylesheets) {
-      const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
+      const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
       if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
           for (let i = 0; i < stylesheets.length; i++) {
               insertStylesheet(stylesheets[i]);
           }
       }
-      else if (ssr || vm.hydrated) {
+      else if (vm.hydrated) {
           // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
           //       This works in the client, because the stylesheets are created, and cached in the VM
           //       the first time the VM renders.
@@ -3551,30 +3553,67 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+
+  function checkHasVM(elm) {
+    const hasVM = !isUndefined$1(getAssociatedVMIfPresent(elm));
+
+    if (process.env.NODE_ENV !== 'production' && !hasVM) {
+      // Occurs when an element is manually created with the same tag name as an existing LWC component. In that case,
+      // we skip calling the LWC connectedCallback/disconnectedCallback logic and log an error.
+      logError(`VM for tag name "${elm.tagName.toLowerCase()}" is undefined. ` + `This indicates that an element was created with this tag name, ` + `which is already reserved by an LWC component. Use lwc.createElement ` + `instead to create elements.`);
+    }
+
+    return hasVM;
+  }
+
   function getUpgradableConstructor(tagName, renderer) {
-      const { getCustomElement, HTMLElementExported: RendererHTMLElement, defineCustomElement, } = renderer;
-      // Should never get a tag with upper case letter at this point, the compiler should
-      // produce only tags with lowercase letters
-      // But, for backwards compatibility, we will lower case the tagName
-      tagName = tagName.toLowerCase();
-      let CE = getCustomElement(tagName);
-      if (!isUndefined$1(CE)) {
-          return CE;
+    const {
+      getCustomElement,
+      HTMLElementExported: RendererHTMLElement,
+      defineCustomElement
+    } = renderer; // Should never get a tag with upper case letter at this point, the compiler should
+    // produce only tags with lowercase letters
+    // But, for backwards compatibility, we will lower case the tagName
+
+    tagName = tagName.toLowerCase();
+    let CE = getCustomElement(tagName);
+
+    if (!isUndefined$1(CE)) {
+      return CE;
+    }
+    /**
+     * LWC Upgradable Element reference to an element that was created
+     * via the scoped registry mechanism, and that is ready to be upgraded.
+     */
+
+
+    CE = class LWCUpgradableElement extends RendererHTMLElement {
+      constructor(upgradeCallback) {
+        super();
+
+        if (isFunction$1(upgradeCallback)) {
+          upgradeCallback(this); // nothing to do with the result for now
+        }
       }
-      /**
-       * LWC Upgradable Element reference to an element that was created
-       * via the scoped registry mechanism, and that is ready to be upgraded.
-       */
-      CE = class LWCUpgradableElement extends RendererHTMLElement {
-          constructor(upgradeCallback) {
-              super();
-              if (isFunction$1(upgradeCallback)) {
-                  upgradeCallback(this); // nothing to do with the result for now
-              }
-          }
+
+    };
+
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      CE.prototype.connectedCallback = function () {
+        if (checkHasVM(this)) {
+          connectRootElement(this);
+        }
       };
-      defineCustomElement(tagName, CE);
-      return CE;
+
+      CE.prototype.disconnectedCallback = function () {
+        if (checkHasVM(this)) {
+          disconnectRootElement(this);
+        }
+      };
+    }
+
+    defineCustomElement(tagName, CE);
+    return CE;
   }
 
   /*
@@ -3662,6 +3701,14 @@
           // different than the one previously set.
           if (isFirstPatch ||
               cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
+              // Additional verification if properties are supported by the element
+              // Validation relies on html properties and public properties being defined on the element,
+              // SSR has its own custom validation.
+              if (process.env.NODE_ENV !== 'production') {
+                  if (!(key in elm)) {
+                      logWarn(`Unknown public property "${key}" of element <${elm.tagName.toLowerCase()}>. This is either a typo on the corresponding attribute "${htmlPropertyToAttribute(key)}", or the attribute does not exist in this browser or DOM implementation.`);
+                  }
+              }
               setProperty(elm, key, cur);
           }
       }
@@ -3820,569 +3867,798 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   function patchChildren(c1, c2, parent, renderer) {
-      if (hasDynamicChildren(c2)) {
-          updateDynamicChildren(c1, c2, parent, renderer);
-      }
-      else {
-          updateStaticChildren(c1, c2, parent, renderer);
-      }
+    if (hasDynamicChildren(c2)) {
+      updateDynamicChildren(c1, c2, parent, renderer);
+    } else {
+      updateStaticChildren(c1, c2, parent, renderer);
+    }
   }
-  function patch(n1, n2, renderer) {
-      var _a, _b;
-      if (n1 === n2) {
-          return;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-          if (!isSameVnode(n1, n2)) {
-              throw new Error('Expected these VNodes to be the same: ' +
-                  JSON.stringify({ sel: n1.sel, key: n1.key }) +
-                  ', ' +
-                  JSON.stringify({ sel: n2.sel, key: n2.key }));
-          }
-      }
-      switch (n2.type) {
-          case 0 /* VNodeType.Text */:
-              // VText has no special capability, fallback to the owner's renderer
-              patchText(n1, n2, renderer);
-              break;
-          case 1 /* VNodeType.Comment */:
-              // VComment has no special capability, fallback to the owner's renderer
-              patchComment(n1, n2, renderer);
-              break;
-          case 4 /* VNodeType.Static */:
-              n2.elm = n1.elm;
-              break;
-          case 2 /* VNodeType.Element */:
-              patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
-              break;
-          case 3 /* VNodeType.CustomElement */:
-              patchCustomElement(n1, n2, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
-              break;
+
+  function patch(n1, n2, parent, renderer) {
+    var _a, _b;
+
+    if (n1 === n2) {
+      return;
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!isSameVnode(n1, n2)) {
+        throw new Error('Expected these VNodes to be the same: ' + JSON.stringify({
+          sel: n1.sel,
+          key: n1.key
+        }) + ', ' + JSON.stringify({
+          sel: n2.sel,
+          key: n2.key
+        }));
       }
+    }
+
+    switch (n2.type) {
+      case 0
+      /* VNodeType.Text */
+      :
+        // VText has no special capability, fallback to the owner's renderer
+        patchText(n1, n2, renderer);
+        break;
+
+      case 1
+      /* VNodeType.Comment */
+      :
+        // VComment has no special capability, fallback to the owner's renderer
+        patchComment(n1, n2, renderer);
+        break;
+
+      case 4
+      /* VNodeType.Static */
+      :
+        n2.elm = n1.elm;
+        break;
+
+      case 2
+      /* VNodeType.Element */
+      :
+        patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
+        break;
+
+      case 3
+      /* VNodeType.CustomElement */
+      :
+        patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+        break;
+    }
   }
+
   function mount(node, parent, renderer, anchor) {
-      var _a, _b;
-      switch (node.type) {
-          case 0 /* VNodeType.Text */:
-              // VText has no special capability, fallback to the owner's renderer
-              mountText(node, parent, anchor, renderer);
-              break;
-          case 1 /* VNodeType.Comment */:
-              // VComment has no special capability, fallback to the owner's renderer
-              mountComment(node, parent, anchor, renderer);
-              break;
-          case 4 /* VNodeType.Static */:
-              // VStatic cannot have a custom renderer associated to them, using owner's renderer
-              mountStatic(node, parent, anchor, renderer);
-              break;
-          case 2 /* VNodeType.Element */:
-              // If the vnode data has a renderer override use it, else fallback to owner's renderer
-              mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
-              break;
-          case 3 /* VNodeType.CustomElement */:
-              // If the vnode data has a renderer override use it, else fallback to owner's renderer
-              mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
-              break;
-      }
+    var _a, _b;
+
+    switch (node.type) {
+      case 0
+      /* VNodeType.Text */
+      :
+        // VText has no special capability, fallback to the owner's renderer
+        mountText(node, parent, anchor, renderer);
+        break;
+
+      case 1
+      /* VNodeType.Comment */
+      :
+        // VComment has no special capability, fallback to the owner's renderer
+        mountComment(node, parent, anchor, renderer);
+        break;
+
+      case 4
+      /* VNodeType.Static */
+      :
+        // VStatic cannot have a custom renderer associated to them, using owner's renderer
+        mountStatic(node, parent, anchor, renderer);
+        break;
+
+      case 2
+      /* VNodeType.Element */
+      :
+        // If the vnode data has a renderer override use it, else fallback to owner's renderer
+        mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
+        break;
+
+      case 3
+      /* VNodeType.CustomElement */
+      :
+        // If the vnode data has a renderer override use it, else fallback to owner's renderer
+        mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+        break;
+    }
   }
+
   function patchText(n1, n2, renderer) {
-      n2.elm = n1.elm;
-      if (n2.text !== n1.text) {
-          updateTextContent(n2, renderer);
-      }
+    n2.elm = n1.elm;
+
+    if (n2.text !== n1.text) {
+      updateTextContent(n2, renderer);
+    }
   }
+
   function mountText(vnode, parent, anchor, renderer) {
-      const { owner } = vnode;
-      const { createText } = renderer;
-      const textNode = (vnode.elm = createText(vnode.text));
-      linkNodeToShadow(textNode, owner, renderer);
-      insertNode(textNode, parent, anchor, renderer);
+    const {
+      owner
+    } = vnode;
+    const {
+      createText
+    } = renderer;
+    const textNode = vnode.elm = createText(vnode.text);
+    linkNodeToShadow(textNode, owner, renderer);
+    insertNode(textNode, parent, anchor, renderer);
   }
+
   function patchComment(n1, n2, renderer) {
-      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, renderer);
-      }
+    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, renderer);
+    }
   }
+
   function mountComment(vnode, parent, anchor, renderer) {
-      const { owner } = vnode;
-      const { createComment } = renderer;
-      const commentNode = (vnode.elm = createComment(vnode.text));
-      linkNodeToShadow(commentNode, owner, renderer);
-      insertNode(commentNode, parent, anchor, renderer);
+    const {
+      owner
+    } = vnode;
+    const {
+      createComment
+    } = renderer;
+    const commentNode = vnode.elm = createComment(vnode.text);
+    linkNodeToShadow(commentNode, owner, renderer);
+    insertNode(commentNode, parent, anchor, renderer);
   }
+
   function mountElement(vnode, parent, anchor, renderer) {
-      const { sel, owner, data: { svg }, } = vnode;
-      const { createElement } = renderer;
-      const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-      const elm = (vnode.elm = createElement(sel, namespace));
-      linkNodeToShadow(elm, owner, renderer);
-      applyStyleScoping(elm, owner, renderer);
-      applyDomManual(elm, vnode);
-      applyElementRestrictions(elm, vnode);
-      patchElementPropsAndAttrs$1(null, vnode, renderer);
-      insertNode(elm, parent, anchor, renderer);
-      mountVNodes(vnode.children, elm, renderer, null);
+    const {
+      sel,
+      owner,
+      data: {
+        svg
+      }
+    } = vnode;
+    const {
+      createElement
+    } = renderer;
+    const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
+    const elm = vnode.elm = createElement(sel, namespace);
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
+    applyDomManual(elm, vnode);
+    applyElementRestrictions(elm, vnode);
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
+    mountVNodes(vnode.children, elm, renderer, null);
   }
+
   function patchElement(n1, n2, renderer) {
-      const elm = (n2.elm = n1.elm);
-      patchElementPropsAndAttrs$1(n1, n2, renderer);
-      patchChildren(n1.children, n2.children, elm, renderer);
+    const elm = n2.elm = n1.elm;
+    patchElementPropsAndAttrs$1(n1, n2, renderer);
+    patchChildren(n1.children, n2.children, elm, renderer);
   }
+
   function mountStatic(vnode, parent, anchor, renderer) {
-      const { owner } = vnode;
-      const { cloneNode, isSyntheticShadowDefined } = renderer;
-      const elm = (vnode.elm = cloneNode(vnode.fragment, true));
-      linkNodeToShadow(elm, owner, renderer);
-      applyElementRestrictions(elm, vnode);
-      // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
-      const { renderMode, shadowMode } = owner;
-      if (isSyntheticShadowDefined) {
-          if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-              elm[KEY__SHADOW_STATIC] = true;
-          }
+    const {
+      owner
+    } = vnode;
+    const {
+      cloneNode,
+      isSyntheticShadowDefined
+    } = renderer;
+    const elm = vnode.elm = cloneNode(vnode.fragment, true);
+    linkNodeToShadow(elm, owner, renderer);
+    applyElementRestrictions(elm, vnode); // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+
+    const {
+      renderMode,
+      shadowMode
+    } = owner;
+
+    if (isSyntheticShadowDefined) {
+      if (shadowMode === 1
+      /* ShadowMode.Synthetic */
+      || renderMode === 0
+      /* RenderMode.Light */
+      ) {
+        elm[KEY__SHADOW_STATIC] = true;
       }
-      insertNode(elm, parent, anchor, renderer);
+    }
+
+    insertNode(elm, parent, anchor, renderer);
   }
+
   function mountCustomElement(vnode, parent, anchor, renderer) {
-      const { sel, owner } = vnode;
-      const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
-      /**
-       * Note: if the upgradable constructor does not expect, or throw when we new it
-       * with a callback as the first argument, we could implement a more advanced
-       * mechanism that only passes that argument if the constructor is known to be
-       * an upgradable custom element.
-       */
-      let vm;
-      const elm = new UpgradableConstructor((elm) => {
-          // the custom element from the registry is expecting an upgrade callback
-          vm = createViewModelHook(elm, vnode, renderer);
-      });
-      vnode.elm = elm;
-      vnode.vm = vm;
-      linkNodeToShadow(elm, owner, renderer);
-      applyStyleScoping(elm, owner, renderer);
-      if (vm) {
-          allocateChildren(vnode, vm);
-      }
-      else if (vnode.ctor !== UpgradableConstructor) {
-          throw new TypeError(`Incorrect Component Constructor`);
-      }
-      patchElementPropsAndAttrs$1(null, vnode, renderer);
-      insertNode(elm, parent, anchor, renderer);
-      if (vm) {
+    const {
+      sel,
+      owner
+    } = vnode;
+    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+    /**
+     * Note: if the upgradable constructor does not expect, or throw when we new it
+     * with a callback as the first argument, we could implement a more advanced
+     * mechanism that only passes that argument if the constructor is known to be
+     * an upgradable custom element.
+     */
+
+    let vm;
+    const elm = new UpgradableConstructor(elm => {
+      // the custom element from the registry is expecting an upgrade callback
+      vm = createViewModelHook(elm, vnode, renderer);
+    });
+    vnode.elm = elm;
+    vnode.vm = vm;
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
+
+    if (vm) {
+      allocateChildren(vnode, vm);
+    } else if (vnode.ctor !== UpgradableConstructor) {
+      throw new TypeError(`Incorrect Component Constructor`);
+    }
+
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
+
+    if (vm) {
+      {
+        if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
           if (process.env.NODE_ENV !== 'production') {
-              assert.isTrue(vm.state === 0 /* VMState.created */, `${vm} cannot be recycled.`);
+            // With synthetic lifecycle callbacks, it's possible for elements to be removed without the engine
+            // noticing it (e.g. `appendChild` the same host element twice). This test ensures we don't regress.
+            assert.isTrue(vm.state === 0
+            /* VMState.created */
+            , `${vm} cannot be recycled.`);
           }
+
           runConnectedCallback(vm);
+        }
       }
-      mountVNodes(vnode.children, elm, renderer, null);
-      if (vm) {
-          appendVM(vm);
-      }
+    }
+
+    mountVNodes(vnode.children, elm, renderer, null);
+
+    if (vm) {
+      appendVM(vm);
+    }
   }
-  function patchCustomElement(n1, n2, renderer) {
-      const elm = (n2.elm = n1.elm);
-      const vm = (n2.vm = n1.vm);
+
+  function patchCustomElement(n1, n2, parent, renderer) {
+    if (n1.ctor !== n2.ctor) {
+      // If the constructor, unmount the current component and mount a new one using the new
+      // constructor.
+      const anchor = renderer.nextSibling(n1.elm);
+      unmount(n1, parent, renderer, true);
+      mountCustomElement(n2, parent, anchor, renderer);
+    } else {
+      // Otherwise patch the existing component with new props/attrs/etc.
+      const elm = n2.elm = n1.elm;
+      const vm = n2.vm = n1.vm;
       patchElementPropsAndAttrs$1(n1, n2, renderer);
+
       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
+        // 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, renderer);
+
       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);
+        // 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, renderer, anchor, start = 0, end = vnodes.length) {
-      for (; start < end; ++start) {
-          const vnode = vnodes[start];
-          if (isVNode(vnode)) {
-              mount(vnode, parent, renderer, anchor);
-          }
+    for (; start < end; ++start) {
+      const vnode = vnodes[start];
+
+      if (isVNode(vnode)) {
+        mount(vnode, parent, renderer, anchor);
       }
+    }
   }
+
   function unmount(vnode, parent, renderer, doRemove = false) {
-      const { type, elm, sel } = vnode;
-      // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
-      // subtree root, is the only element worth unmounting from the subtree.
-      if (doRemove) {
-          // The vnode might or might not have a data.renderer associated to it
-          // but the removal used here is from the owner instead.
-          removeNode(elm, parent, renderer);
-      }
-      switch (type) {
-          case 2 /* VNodeType.Element */: {
-              // Slot content is removed to trigger slotchange event when removing slot.
-              // Only required for synthetic shadow.
-              const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
-              unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
-              break;
-          }
-          case 3 /* VNodeType.CustomElement */: {
-              const { vm } = vnode;
-              // No need to unmount the children here, `removeVM` will take care of removing the
-              // children.
-              if (!isUndefined$1(vm)) {
-                  removeVM(vm);
-              }
+    const {
+      type,
+      elm,
+      sel
+    } = vnode; // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
+    // subtree root, is the only element worth unmounting from the subtree.
+
+    if (doRemove) {
+      // The vnode might or might not have a data.renderer associated to it
+      // but the removal used here is from the owner instead.
+      removeNode(elm, parent, renderer);
+    }
+
+    switch (type) {
+      case 2
+      /* VNodeType.Element */
+      :
+        {
+          // Slot content is removed to trigger slotchange event when removing slot.
+          // Only required for synthetic shadow.
+          const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1
+          /* ShadowMode.Synthetic */
+          ;
+          unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
+          break;
+        }
+
+      case 3
+      /* VNodeType.CustomElement */
+      :
+        {
+          const {
+            vm
+          } = vnode; // No need to unmount the children here, `removeVM` will take care of removing the
+          // children.
+
+          if (!isUndefined$1(vm)) {
+            removeVM(vm);
           }
-      }
+        }
+    }
   }
+
   function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, end = vnodes.length) {
-      for (; start < end; ++start) {
-          const ch = vnodes[start];
-          if (isVNode(ch)) {
-              unmount(ch, parent, renderer, doRemove);
-          }
+    for (; start < end; ++start) {
+      const ch = vnodes[start];
+
+      if (isVNode(ch)) {
+        unmount(ch, parent, renderer, doRemove);
       }
+    }
   }
+
   function isVNode(vnode) {
-      return vnode != null;
+    return vnode != null;
   }
+
   function linkNodeToShadow(elm, owner, renderer) {
-      const { renderRoot, renderMode, shadowMode } = owner;
-      const { isSyntheticShadowDefined } = renderer;
-      // TODO [#1164]: this should eventually be done by the polyfill directly
-      if (isSyntheticShadowDefined) {
-          if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-              elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
-          }
+    const {
+      renderRoot,
+      renderMode,
+      shadowMode
+    } = owner;
+    const {
+      isSyntheticShadowDefined
+    } = renderer; // TODO [#1164]: this should eventually be done by the polyfill directly
+
+    if (isSyntheticShadowDefined) {
+      if (shadowMode === 1
+      /* ShadowMode.Synthetic */
+      || renderMode === 0
+      /* RenderMode.Light */
+      ) {
+        elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
       }
+    }
   }
+
   function updateTextContent(vnode, renderer) {
-      const { elm, text } = vnode;
-      const { setText } = renderer;
-      if (process.env.NODE_ENV !== 'production') {
-          unlockDomMutation();
-      }
-      setText(elm, text);
-      if (process.env.NODE_ENV !== 'production') {
-          lockDomMutation();
-      }
+    const {
+      elm,
+      text
+    } = vnode;
+    const {
+      setText
+    } = renderer;
+
+    if (process.env.NODE_ENV !== 'production') {
+      unlockDomMutation();
+    }
+
+    setText(elm, text);
+
+    if (process.env.NODE_ENV !== 'production') {
+      lockDomMutation();
+    }
   }
+
   function insertNode(node, parent, anchor, renderer) {
-      if (process.env.NODE_ENV !== 'production') {
-          unlockDomMutation();
-      }
-      renderer.insert(node, parent, anchor);
-      if (process.env.NODE_ENV !== 'production') {
-          lockDomMutation();
-      }
+    if (process.env.NODE_ENV !== 'production') {
+      unlockDomMutation();
+    }
+
+    renderer.insert(node, parent, anchor);
+
+    if (process.env.NODE_ENV !== 'production') {
+      lockDomMutation();
+    }
   }
+
   function removeNode(node, parent, renderer) {
-      if (process.env.NODE_ENV !== 'production') {
-          unlockDomMutation();
-      }
-      renderer.remove(node, parent);
-      if (process.env.NODE_ENV !== 'production') {
-          lockDomMutation();
-      }
+    if (process.env.NODE_ENV !== 'production') {
+      unlockDomMutation();
+    }
+
+    renderer.remove(node, parent);
+
+    if (process.env.NODE_ENV !== 'production') {
+      lockDomMutation();
+    }
   }
+
   function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
-      if (isNull(oldVnode)) {
-          applyEventListeners(vnode, renderer);
-          applyStaticClassAttribute(vnode, renderer);
-          applyStaticStyleAttribute(vnode, renderer);
-      }
-      // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
-      // value is set before type=radio.
-      patchClassAttribute(oldVnode, vnode, renderer);
-      patchStyleAttribute(oldVnode, vnode, renderer);
-      patchAttributes(oldVnode, vnode, renderer);
-      patchProps(oldVnode, vnode, renderer);
+    if (isNull(oldVnode)) {
+      applyEventListeners(vnode, renderer);
+      applyStaticClassAttribute(vnode, renderer);
+      applyStaticStyleAttribute(vnode, renderer);
+    } // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
+    // value is set before type=radio.
+
+
+    patchClassAttribute(oldVnode, vnode, renderer);
+    patchStyleAttribute(oldVnode, vnode, renderer);
+    patchAttributes(oldVnode, vnode, renderer);
+    patchProps(oldVnode, vnode, renderer);
   }
+
   function applyStyleScoping(elm, owner, renderer) {
-      // Set the class name for `*.scoped.css` style scoping.
-      const scopeToken = getScopeTokenClass(owner);
-      if (!isNull(scopeToken)) {
-          const { getClassList } = renderer;
-          // TODO [#2762]: this dot notation with add is probably problematic
-          // probably we should have a renderer api for just the add operation
-          getClassList(elm).add(scopeToken);
-      }
-      // Set property element for synthetic shadow DOM style scoping.
-      const { stylesheetToken: syntheticToken } = owner.context;
-      if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
-          elm.$shadowToken$ = syntheticToken;
-      }
-  }
-  function applyDomManual(elm, vnode) {
-      var _a;
-      const { owner, data: { context }, } = vnode;
-      if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual" /* LwcDomMode.Manual */) {
-          elm.$domManual$ = true;
-      }
-  }
-  function applyElementRestrictions(elm, vnode) {
-      var _a, _b;
-      if (process.env.NODE_ENV !== 'production') {
-          const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
-          const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
-          patchElementWithRestrictions(elm, {
-              isPortal,
-              isLight,
-          });
+    // Set the class name for `*.scoped.css` style scoping.
+    const scopeToken = getScopeTokenClass(owner);
+
+    if (!isNull(scopeToken)) {
+      const {
+        getClassList
+      } = renderer; // TODO [#2762]: this dot notation with add is probably problematic
+      // probably we should have a renderer api for just the add operation
+
+      getClassList(elm).add(scopeToken);
+    } // Set property element for synthetic shadow DOM style scoping.
+
+
+    const {
+      stylesheetToken: syntheticToken
+    } = owner.context;
+
+    if (owner.shadowMode === 1
+    /* ShadowMode.Synthetic */
+    && !isUndefined$1(syntheticToken)) {
+      elm.$shadowToken$ = syntheticToken;
+    }
+  }
+
+  function applyDomManual(elm, vnode) {
+    var _a;
+
+    const {
+      owner,
+      data: {
+        context
       }
+    } = vnode;
+
+    if (owner.shadowMode === 1
+    /* ShadowMode.Synthetic */
+    && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual"
+    /* LwcDomMode.Manual */
+    ) {
+      elm.$domManual$ = true;
+    }
   }
+
+  function applyElementRestrictions(elm, vnode) {
+    var _a, _b;
+
+    if (process.env.NODE_ENV !== 'production') {
+      const isPortal = vnode.type === 2
+      /* VNodeType.Element */
+      && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual"
+      /* LwcDomMode.Manual */
+      ;
+      const isLight = vnode.owner.renderMode === 0
+      /* RenderMode.Light */
+      ;
+      patchElementWithRestrictions(elm, {
+        isPortal,
+        isLight
+      });
+    }
+  }
+
   function allocateChildren(vnode, vm) {
-      // A component with slots will re-render because:
-      // 1- There is a change of the internal state.
-      // 2- There is a change on the external api (ex: slots)
-      //
-      // In case #1, the vnodes in the cmpSlots will be reused since they didn't changed. This routine emptied the
-      // slotted children when those VCustomElement were rendered and therefore in subsequent calls to allocate children
-      // in a reused VCustomElement, there won't be any slotted children.
-      // For those cases, we will use the reference for allocated children stored when rendering the fresh VCustomElement.
-      //
-      // In case #2, we will always get a fresh VCustomElement.
-      const children = vnode.aChildren || vnode.children;
-      vm.aChildren = children;
-      const { renderMode, shadowMode } = vm;
-      if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-          // slow path
-          allocateInSlot(vm, children);
-          // save the allocated children in case this vnode is reused.
-          vnode.aChildren = children;
-          // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
-          vnode.children = EmptyArray;
-      }
+    // A component with slots will re-render because:
+    // 1- There is a change of the internal state.
+    // 2- There is a change on the external api (ex: slots)
+    //
+    // In case #1, the vnodes in the cmpSlots will be reused since they didn't changed. This routine emptied the
+    // slotted children when those VCustomElement were rendered and therefore in subsequent calls to allocate children
+    // in a reused VCustomElement, there won't be any slotted children.
+    // For those cases, we will use the reference for allocated children stored when rendering the fresh VCustomElement.
+    //
+    // In case #2, we will always get a fresh VCustomElement.
+    const children = vnode.aChildren || vnode.children;
+    vm.aChildren = children;
+    const {
+      renderMode,
+      shadowMode
+    } = vm;
+
+    if (shadowMode === 1
+    /* ShadowMode.Synthetic */
+    || renderMode === 0
+    /* RenderMode.Light */
+    ) {
+      // slow path
+      allocateInSlot(vm, children); // save the allocated children in case this vnode is reused.
+
+      vnode.aChildren = children; // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
+
+      vnode.children = EmptyArray;
+    }
   }
+
   function createViewModelHook(elm, vnode, renderer) {
-      let vm = getAssociatedVMIfPresent(elm);
-      // There is a possibility that a custom element is registered under tagName, in which case, the
-      // initialization is already carry on, and there is nothing else to do here since this hook is
-      // called right after invoking `document.createElement`.
-      if (!isUndefined$1(vm)) {
-          return vm;
-      }
-      const { sel, mode, ctor, owner } = vnode;
-      vm = createVM(elm, ctor, renderer, {
-          mode,
-          owner,
-          tagName: sel,
-      });
-      if (process.env.NODE_ENV !== 'production') {
-          assert.isTrue(isArray$1(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
-      }
+    let vm = getAssociatedVMIfPresent(elm); // There is a possibility that a custom element is registered under tagName, in which case, the
+    // initialization is already carry on, and there is nothing else to do here since this hook is
+    // called right after invoking `document.createElement`.
+
+    if (!isUndefined$1(vm)) {
       return vm;
+    }
+
+    const {
+      sel,
+      mode,
+      ctor,
+      owner
+    } = vnode;
+    vm = createVM(elm, ctor, renderer, {
+      mode,
+      owner,
+      tagName: sel
+    });
+
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(isArray$1(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
+    }
+
+    return vm;
   }
+
   function allocateInSlot(vm, children) {
-      var _a;
-      const { cmpSlots: oldSlots } = vm;
-      const cmpSlots = (vm.cmpSlots = create(null));
-      for (let i = 0, len = children.length; i < len; i += 1) {
-          const vnode = children[i];
-          if (isNull(vnode)) {
-              continue;
-          }
-          let slotName = '';
-          if (isVBaseElement(vnode)) {
-              slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
-          }
-          const vnodes = (cmpSlots[slotName] = cmpSlots[slotName] || []);
-          ArrayPush$1.call(vnodes, vnode);
-      }
-      if (isFalse(vm.isDirty)) {
-          // We need to determine if the old allocation is really different from the new one
-          // and mark the vm as dirty
-          const oldKeys = keys(oldSlots);
-          if (oldKeys.length !== keys(cmpSlots).length) {
-              markComponentAsDirty(vm);
-              return;
-          }
-          for (let i = 0, len = oldKeys.length; i < len; i += 1) {
-              const key = oldKeys[i];
-              if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
-                  markComponentAsDirty(vm);
-                  return;
-              }
-              const oldVNodes = oldSlots[key];
-              const vnodes = cmpSlots[key];
-              for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
-                  if (oldVNodes[j] !== vnodes[j]) {
-                      markComponentAsDirty(vm);
-                      return;
-                  }
-              }
+    var _a;
+
+    const {
+      cmpSlots: oldSlots
+    } = vm;
+    const cmpSlots = vm.cmpSlots = create(null);
+
+    for (let i = 0, len = children.length; i < len; i += 1) {
+      const vnode = children[i];
+
+      if (isNull(vnode)) {
+        continue;
+      }
+
+      let slotName = '';
+
+      if (isVBaseElement(vnode)) {
+        slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
+      }
+
+      const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || [];
+      ArrayPush$1.call(vnodes, vnode);
+    }
+
+    if (isFalse(vm.isDirty)) {
+      // We need to determine if the old allocation is really different from the new one
+      // and mark the vm as dirty
+      const oldKeys = keys(oldSlots);
+
+      if (oldKeys.length !== keys(cmpSlots).length) {
+        markComponentAsDirty(vm);
+        return;
+      }
+
+      for (let i = 0, len = oldKeys.length; i < len; i += 1) {
+        const key = oldKeys[i];
+
+        if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
+          markComponentAsDirty(vm);
+          return;
+        }
+
+        const oldVNodes = oldSlots[key];
+        const vnodes = cmpSlots[key];
+
+        for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
+          if (oldVNodes[j] !== vnodes[j]) {
+            markComponentAsDirty(vm);
+            return;
           }
+        }
       }
-  }
-  // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-  const FromIteration = new WeakMap();
-  // dynamic children means it was generated by an iteration
+    }
+  } // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
+
+
+  const FromIteration = new WeakMap(); // dynamic children means it was generated by an iteration
   // in a template, and will require a more complex diffing algo.
+
   function markAsDynamicChildren(children) {
-      FromIteration.set(children, 1);
+    FromIteration.set(children, 1);
   }
+
   function hasDynamicChildren(children) {
-      return FromIteration.has(children);
+    return FromIteration.has(children);
   }
+
   function createKeyToOldIdx(children, beginIdx, endIdx) {
-      const map = {};
-      // TODO [#1637]: simplify this by assuming that all vnodes has keys
-      for (let j = beginIdx; j <= endIdx; ++j) {
-          const ch = children[j];
-          if (isVNode(ch)) {
-              const { key } = ch;
-              if (key !== undefined) {
-                  map[key] = j;
-              }
-          }
+    const map = {}; // TODO [#1637]: simplify this by assuming that all vnodes has keys
+
+    for (let j = beginIdx; j <= endIdx; ++j) {
+      const ch = children[j];
+
+      if (isVNode(ch)) {
+        const {
+          key
+        } = ch;
+
+        if (key !== undefined) {
+          map[key] = j;
+        }
       }
-      return map;
+    }
+
+    return map;
   }
+
   function updateDynamicChildren(oldCh, newCh, parent, renderer) {
-      let oldStartIdx = 0;
-      let newStartIdx = 0;
-      let oldEndIdx = oldCh.length - 1;
-      let oldStartVnode = oldCh[0];
-      let oldEndVnode = oldCh[oldEndIdx];
-      const newChEnd = newCh.length - 1;
-      let newEndIdx = newChEnd;
-      let newStartVnode = newCh[0];
-      let newEndVnode = newCh[newEndIdx];
-      let oldKeyToIdx;
-      let idxInOld;
-      let elmToMove;
-      let before;
-      let clonedOldCh = false;
-      while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-          if (!isVNode(oldStartVnode)) {
-              oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-          }
-          else if (!isVNode(oldEndVnode)) {
-              oldEndVnode = oldCh[--oldEndIdx];
-          }
-          else if (!isVNode(newStartVnode)) {
-              newStartVnode = newCh[++newStartIdx];
-          }
-          else if (!isVNode(newEndVnode)) {
-              newEndVnode = newCh[--newEndIdx];
-          }
-          else if (isSameVnode(oldStartVnode, newStartVnode)) {
-              patch(oldStartVnode, newStartVnode, renderer);
-              oldStartVnode = oldCh[++oldStartIdx];
-              newStartVnode = newCh[++newStartIdx];
-          }
-          else if (isSameVnode(oldEndVnode, newEndVnode)) {
-              patch(oldEndVnode, newEndVnode, renderer);
-              oldEndVnode = oldCh[--oldEndIdx];
-              newEndVnode = newCh[--newEndIdx];
-          }
-          else if (isSameVnode(oldStartVnode, newEndVnode)) {
-              // Vnode moved right
-              patch(oldStartVnode, newEndVnode, renderer);
-              insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
-              oldStartVnode = oldCh[++oldStartIdx];
-              newEndVnode = newCh[--newEndIdx];
-          }
-          else if (isSameVnode(oldEndVnode, newStartVnode)) {
-              // Vnode moved left
-              patch(oldEndVnode, newStartVnode, renderer);
-              insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
-              oldEndVnode = oldCh[--oldEndIdx];
-              newStartVnode = newCh[++newStartIdx];
-          }
-          else {
-              if (oldKeyToIdx === undefined) {
-                  oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-              }
-              idxInOld = oldKeyToIdx[newStartVnode.key];
-              if (isUndefined$1(idxInOld)) {
-                  // New element
-                  mount(newStartVnode, parent, renderer, oldStartVnode.elm);
-                  newStartVnode = newCh[++newStartIdx];
-              }
-              else {
-                  elmToMove = oldCh[idxInOld];
-                  if (isVNode(elmToMove)) {
-                      if (elmToMove.sel !== newStartVnode.sel) {
-                          // New element
-                          mount(newStartVnode, parent, renderer, oldStartVnode.elm);
-                      }
-                      else {
-                          patch(elmToMove, newStartVnode, renderer);
-                          // Delete the old child, but copy the array since it is read-only.
-                          // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
-                          // so we only care about the `oldCh` object inside this function.
-                          // To avoid cloning over and over again, we check `clonedOldCh`
-                          // and only clone once.
-                          if (!clonedOldCh) {
-                              clonedOldCh = true;
-                              oldCh = [...oldCh];
-                          }
-                          // We've already cloned at least once, so it's no longer read-only
-                          oldCh[idxInOld] = undefined;
-                          insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
-                      }
-                  }
-                  newStartVnode = newCh[++newStartIdx];
-              }
+    let oldStartIdx = 0;
+    let newStartIdx = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    const newChEnd = newCh.length - 1;
+    let newEndIdx = newChEnd;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let oldKeyToIdx;
+    let idxInOld;
+    let elmToMove;
+    let before;
+    let clonedOldCh = false;
+
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+      if (!isVNode(oldStartVnode)) {
+        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
+      } else if (!isVNode(oldEndVnode)) {
+        oldEndVnode = oldCh[--oldEndIdx];
+      } else if (!isVNode(newStartVnode)) {
+        newStartVnode = newCh[++newStartIdx];
+      } else if (!isVNode(newEndVnode)) {
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldStartVnode, newStartVnode)) {
+        patch(oldStartVnode, newStartVnode, parent, renderer);
+        oldStartVnode = oldCh[++oldStartIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else if (isSameVnode(oldEndVnode, newEndVnode)) {
+        patch(oldEndVnode, newEndVnode, parent, renderer);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldStartVnode, newEndVnode)) {
+        // Vnode moved right
+        patch(oldStartVnode, newEndVnode, parent, renderer);
+        insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
+        oldStartVnode = oldCh[++oldStartIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (isSameVnode(oldEndVnode, newStartVnode)) {
+        // Vnode moved left
+        patch(oldEndVnode, newStartVnode, parent, renderer);
+        insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        if (oldKeyToIdx === undefined) {
+          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
+        }
+
+        idxInOld = oldKeyToIdx[newStartVnode.key];
+
+        if (isUndefined$1(idxInOld)) {
+          // New element
+          mount(newStartVnode, parent, renderer, oldStartVnode.elm);
+          newStartVnode = newCh[++newStartIdx];
+        } else {
+          elmToMove = oldCh[idxInOld];
+
+          if (isVNode(elmToMove)) {
+            if (elmToMove.sel !== newStartVnode.sel) {
+              // New element
+              mount(newStartVnode, parent, renderer, oldStartVnode.elm);
+            } else {
+              patch(elmToMove, newStartVnode, parent, renderer); // Delete the old child, but copy the array since it is read-only.
+              // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
+              // so we only care about the `oldCh` object inside this function.
+              // To avoid cloning over and over again, we check `clonedOldCh`
+              // and only clone once.
+
+              if (!clonedOldCh) {
+                clonedOldCh = true;
+                oldCh = [...oldCh];
+              } // We've already cloned at least once, so it's no longer read-only
+
+
+              oldCh[idxInOld] = undefined;
+              insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
+            }
           }
+
+          newStartVnode = newCh[++newStartIdx];
+        }
       }
-      if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-          if (oldStartIdx > oldEndIdx) {
-              // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
-              // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-              let i = newEndIdx;
-              let n;
-              do {
-                  n = newCh[++i];
-              } while (!isVNode(n) && i < newChEnd);
-              before = isVNode(n) ? n.elm : null;
-              mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
-          }
-          else {
-              unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
-          }
+    }
+
+    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+      if (oldStartIdx > oldEndIdx) {
+        // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
+        // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
+        let i = newEndIdx;
+        let n;
+
+        do {
+          n = newCh[++i];
+        } while (!isVNode(n) && i < newChEnd);
+
+        before = isVNode(n) ? n.elm : null;
+        mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
+      } else {
+        unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
       }
+    }
   }
+
   function updateStaticChildren(c1, c2, parent, renderer) {
-      const c1Length = c1.length;
-      const c2Length = c2.length;
-      if (c1Length === 0) {
-          // the old list is empty, we can directly insert anything new
-          mountVNodes(c2, parent, renderer, null);
-          return;
-      }
-      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
-          unmountVNodes(c1, parent, renderer, true);
-          return;
-      }
-      // if the old list is not empty, the new list MUST have the same
-      // amount of nodes, that's why we call this static children
-      let anchor = null;
-      for (let i = c2Length - 1; i >= 0; i -= 1) {
-          const n1 = c1[i];
-          const n2 = c2[i];
-          if (n2 !== n1) {
-              if (isVNode(n1)) {
-                  if (isVNode(n2)) {
-                      // both vnodes are equivalent, and we just need to patch them
-                      patch(n1, n2, renderer);
-                      anchor = n2.elm;
-                  }
-                  else {
-                      // removing the old vnode since the new one is null
-                      unmount(n1, parent, renderer, true);
-                  }
-              }
-              else if (isVNode(n2)) {
-                  mount(n2, parent, renderer, anchor);
-                  anchor = n2.elm;
-              }
+    const c1Length = c1.length;
+    const c2Length = c2.length;
+
+    if (c1Length === 0) {
+      // the old list is empty, we can directly insert anything new
+      mountVNodes(c2, parent, renderer, null);
+      return;
+    }
+
+    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
+      unmountVNodes(c1, parent, renderer, true);
+      return;
+    } // if the old list is not empty, the new list MUST have the same
+    // amount of nodes, that's why we call this static children
+
+
+    let anchor = null;
+
+    for (let i = c2Length - 1; i >= 0; i -= 1) {
+      const n1 = c1[i];
+      const n2 = c2[i];
+
+      if (n2 !== n1) {
+        if (isVNode(n1)) {
+          if (isVNode(n2)) {
+            // both vnodes are equivalent, and we just need to patch them
+            patch(n1, n2, parent, renderer);
+            anchor = n2.elm;
+          } else {
+            // removing the old vnode since the new one is null
+            unmount(n1, parent, renderer, true);
           }
+        } else if (isVNode(n2)) {
+          mount(n2, parent, renderer, anchor);
+          anchor = n2.elm;
+        }
       }
+    }
   }
 
   /*
@@ -4703,13 +4979,6 @@
       }
       return url;
   }
-  /**
-   * Map to store an index value assigned to any dynamic component reference ingested
-   * by dc() api. This allows us to generate a unique unique per template per dynamic
-   * component reference to avoid diffing algo mismatches.
-   */
-  const DynamicImportedComponentMap = new Map();
-  let dynamicImportedComponentCounter = 0;
   /**
    * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
    */
@@ -4726,18 +4995,7 @@
       if (!isComponentConstructor(Ctor)) {
           throw new Error(`Invalid LWC Constructor ${toString$1(Ctor)} for custom element <${sel}>.`);
       }
-      let idx = DynamicImportedComponentMap.get(Ctor);
-      if (isUndefined$1(idx)) {
-          idx = dynamicImportedComponentCounter++;
-          DynamicImportedComponentMap.set(Ctor, idx);
-      }
-      // 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.
-      const newData = Object.assign(Object.assign({}, data), { key: `dc:${idx}:${data.key}` });
-      return c(sel, Ctor, newData, children);
+      return c(sel, Ctor, data, children);
   }
   /**
    * slow children collection marking mechanism. this API allows the compiler to signal
@@ -5463,7 +5721,7 @@
         return `[object:vm ${def.name} (${vm.idx})]`;
       };
 
-      if (runtimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
+      if (lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
         vm.shadowMode = 0
         /* ShadowMode.Native */
         ;
@@ -5502,7 +5760,7 @@
       } else if (isNativeShadowDefined) {
         // Not combined with above condition because @lwc/features only supports identifiers in
         // the if-condition.
-        if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+        if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
           if (def.shadowSupportMode === "any"
           /* ShadowSupportMode.Any */
           ) {
@@ -5631,16 +5889,9 @@
     const {
       def: {
         renderedCallback
-      },
-      renderer: {
-        ssr
       }
     } = vm;
 
-    if (isTrue(ssr)) {
-      return;
-    }
-
     const {
       rendered
     } = Services;
@@ -5890,13 +6141,7 @@
     vm.velements = EmptyArray;
   }
   function scheduleRehydration(vm) {
-    const {
-      renderer: {
-        ssr
-      }
-    } = vm;
-
-    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
+    if (isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -6003,15 +6248,8 @@
   }
 
   function createFieldDataCallback(vm, name) {
-    const {
-      cmpFields
-    } = vm;
     return value => {
-      if (value !== vm.cmpFields[name]) {
-        // storing the value in the underlying storage
-        cmpFields[name] = value;
-        componentValueMutated(vm, name);
-      }
+      updateComponentValue(vm, name, value);
     };
   }
 
@@ -6229,7 +6467,7 @@
         ArrayPush$1.call(wiredConnecting, () => {
           connector.connect();
 
-          if (!runtimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+          if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
             if (hasDynamicParams) {
               Promise.resolve().then(computeConfigAndUpdate);
               return;
@@ -6375,6 +6613,7 @@
       }
       return renderer.nextSibling(hydratedNode);
   }
+  const NODE_VALUE_PROP = 'nodeValue';
   function hydrateText(node, vnode, renderer) {
       var _a;
       if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
@@ -6382,7 +6621,7 @@
       }
       if (process.env.NODE_ENV !== 'production') {
           const { getProperty } = renderer;
-          const nodeValue = getProperty(node, 'nodeValue');
+          const nodeValue = getProperty(node, NODE_VALUE_PROP);
           if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
               logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
           }
@@ -6399,13 +6638,13 @@
       }
       if (process.env.NODE_ENV !== 'production') {
           const { getProperty } = renderer;
-          const nodeValue = getProperty(node, 'nodeValue');
+          const nodeValue = getProperty(node, NODE_VALUE_PROP);
           if (nodeValue !== vnode.text) {
               logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
           }
       }
       const { setProperty } = renderer;
-      setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+      setProperty(node, NODE_VALUE_PROP, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
       vnode.elm = node;
       return node;
   }
@@ -6673,13 +6912,13 @@
           if (!hasCorrectNodeType(vnode, ssr, 3 /* EnvNodeTypes.TEXT */, renderer)) {
               return false;
           }
-          return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+          return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
       }
       if (getProperty(client, 'nodeType') === 8 /* EnvNodeTypes.COMMENT */) {
           if (!hasCorrectNodeType(vnode, ssr, 8 /* EnvNodeTypes.COMMENT */, renderer)) {
               return false;
           }
-          return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+          return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
       }
       if (!hasCorrectNodeType(vnode, ssr, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
           return false;
@@ -6835,7 +7074,7 @@
       }
       return ctor;
   }
-  /* version: 2.22.0 */
+  /* version: 2.23.2 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6985,61 +7224,303 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
-  let createFragment;
-  if (SUPPORTS_TEMPLATE) {
-      // Parse the fragment HTML string into DOM
-      createFragment = function (html) {
-          const template = document.createElement('template');
-          template.innerHTML = html;
-          return template.content.firstChild;
-      };
-  }
-  else {
-      // In browsers that don't support <template> (e.g. IE11), we need to be careful to wrap elements like
-      // <td> in the proper container elements (e.g. <tbody>), because otherwise they will be parsed as null.
-      // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L273-L280
-      // With other elements added from:
-      // https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
-      // Using the test:
-      // document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
-      // And omitting <html>, <head>, and <body> as these are not practical in an LWC component.
-      const topLevelWrappingMap = {
-          caption: ['table'],
-          col: ['colgroup', 'table'],
-          colgroup: ['table'],
-          option: ['select'],
-          tbody: ['table'],
-          td: ['tr', 'tbody', 'table'],
-          th: ['tr', 'tbody', 'table'],
-          thead: ['table'],
-          tfoot: ['table'],
-          tr: ['tbody', 'table'],
-      };
-      // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L282-L288
-      const getTagName = function (text) {
-          return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
-      };
-      // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
-      createFragment = function (html) {
-          const wrapperTags = topLevelWrappingMap[getTagName(html)];
-          if (!isUndefined$1(wrapperTags)) {
-              for (const wrapperTag of wrapperTags) {
-                  html = `<${wrapperTag}>${html}</${wrapperTag}>`;
+  /**
+   * A factory function that produces a renderer.
+   * Renderer encapsulates operations that are required to render an LWC component into the underlying
+   * runtime environment. In the case of @lwc/enigne-dom, it is meant to be used in a DOM environment.
+   * Example usage:
+   * import { renderer, rendererFactory } from 'lwc';
+   * const customRenderer = rendererFactory(renderer);
+   *
+   * @param baseRenderer Either null or the base renderer imported from 'lwc'.
+   */
+  function rendererFactory(baseRenderer) {
+      // Util functions
+      function assertInvariant(value, msg) {
+          if (!value) {
+              throw new Error(`Invariant Violation: ${msg}`);
+          }
+      }
+      function isNull(obj) {
+          return obj === null;
+      }
+      function isUndefined(obj) {
+          return obj === undefined;
+      }
+      let getCustomElement;
+      let defineCustomElement;
+      let HTMLElementConstructor;
+      function isCustomElementRegistryAvailable() {
+          if (typeof customElements === 'undefined') {
+              return false;
+          }
+          try {
+              // dereference HTMLElement global because babel wraps globals in compat mode with a
+              // _wrapNativeSuper()
+              // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
+              // get wrapped by babel.
+              const HTMLElementAlias = HTMLElement;
+              // In case we use compat mode with a modern browser, the compat mode transformation
+              // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
+              // which are not equipped to be initialized that way.
+              class clazz extends HTMLElementAlias {
               }
+              customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
+              new clazz();
+              return true;
+          }
+          catch (_a) {
+              return false;
           }
-          // For IE11, the document title must not be undefined, but it can be an empty string
-          // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
-          const doc = document.implementation.createHTMLDocument('');
-          doc.body.innerHTML = html;
-          let content = doc.body;
-          if (!isUndefined$1(wrapperTags)) {
-              for (let i = 0; i < wrapperTags.length; i++) {
-                  content = content.firstChild;
+      }
+      if (isCustomElementRegistryAvailable()) {
+          getCustomElement = customElements.get.bind(customElements);
+          defineCustomElement = customElements.define.bind(customElements);
+          HTMLElementConstructor = HTMLElement;
+      }
+      else {
+          const registry = Object.create(null);
+          const reverseRegistry = new WeakMap();
+          defineCustomElement = function define(name, ctor) {
+              if (name !== String.prototype.toLowerCase.call(name) || registry[name]) {
+                  throw new TypeError(`Invalid Registration`);
+              }
+              registry[name] = ctor;
+              reverseRegistry.set(ctor, name);
+          };
+          getCustomElement = function get(name) {
+              return registry[name];
+          };
+          HTMLElementConstructor = function HTMLElement() {
+              if (!(this instanceof HTMLElement)) {
+                  throw new TypeError(`Invalid Invocation`);
+              }
+              const { constructor } = this;
+              const name = reverseRegistry.get(constructor);
+              if (!name) {
+                  throw new TypeError(`Invalid Construction`);
+              }
+              const elm = document.createElement(name);
+              Object.setPrototypeOf(elm, constructor.prototype);
+              return elm;
+          };
+          HTMLElementConstructor.prototype = HTMLElement.prototype;
+      }
+      function cloneNode(node, deep) {
+          return node.cloneNode(deep);
+      }
+      function createElement(tagName, namespace) {
+          return isUndefined(namespace)
+              ? document.createElement(tagName)
+              : document.createElementNS(namespace, tagName);
+      }
+      function createText(content) {
+          return document.createTextNode(content);
+      }
+      function createComment(content) {
+          return document.createComment(content);
+      }
+      let createFragment;
+      // IE11 lacks support for this feature
+      const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
+      if (SUPPORTS_TEMPLATE) {
+          // Parse the fragment HTML string into DOM
+          createFragment = function (html) {
+              const template = document.createElement('template');
+              template.innerHTML = html;
+              return template.content.firstChild;
+          };
+      }
+      else {
+          // In browsers that don't support <template> (e.g. IE11), we need to be careful to wrap elements like
+          // <td> in the proper container elements (e.g. <tbody>), because otherwise they will be parsed as null.
+          // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L273-L280
+          // With other elements added from:
+          // https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
+          // Using the test:
+          // document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
+          // And omitting <html>, <head>, and <body> as these are not practical in an LWC component.
+          const topLevelWrappingMap = {
+              caption: ['table'],
+              col: ['colgroup', 'table'],
+              colgroup: ['table'],
+              option: ['select'],
+              tbody: ['table'],
+              td: ['tr', 'tbody', 'table'],
+              th: ['tr', 'tbody', 'table'],
+              thead: ['table'],
+              tfoot: ['table'],
+              tr: ['tbody', 'table'],
+          };
+          // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L282-L288
+          const getTagName = function (text) {
+              return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
+          };
+          // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
+          createFragment = function (html) {
+              const wrapperTags = topLevelWrappingMap[getTagName(html)];
+              if (!isUndefined(wrapperTags)) {
+                  for (const wrapperTag of wrapperTags) {
+                      html = `<${wrapperTag}>${html}</${wrapperTag}>`;
+                  }
               }
+              // For IE11, the document title must not be undefined, but it can be an empty string
+              // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
+              const doc = document.implementation.createHTMLDocument('');
+              doc.body.innerHTML = html;
+              let content = doc.body;
+              if (!isUndefined(wrapperTags)) {
+                  for (let i = 0; i < wrapperTags.length; i++) {
+                      content = content.firstChild;
+                  }
+              }
+              return content.firstChild;
+          };
+      }
+      function insert(node, parent, anchor) {
+          parent.insertBefore(node, anchor);
+      }
+      function remove(node, parent) {
+          parent.removeChild(node);
+      }
+      function nextSibling(node) {
+          return node.nextSibling;
+      }
+      function attachShadow(element, options) {
+          // `shadowRoot` will be non-null in two cases:
+          //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
+          //   2. when a webapp author places <c-app> in their static HTML and mounts their
+          //      root component with customElement.define('c-app', Ctor)
+          if (!isNull(element.shadowRoot)) {
+              return element.shadowRoot;
+          }
+          return element.attachShadow(options);
+      }
+      function setText(node, content) {
+          node.nodeValue = content;
+      }
+      function getProperty(node, key) {
+          return node[key];
+      }
+      function setProperty(node, key, value) {
+          node[key] = value;
+      }
+      function getAttribute(element, name, namespace) {
+          return isUndefined(namespace)
+              ? element.getAttribute(name)
+              : element.getAttributeNS(namespace, name);
+      }
+      function setAttribute(element, name, value, namespace) {
+          return isUndefined(namespace)
+              ? element.setAttribute(name, value)
+              : element.setAttributeNS(namespace, name, value);
+      }
+      function removeAttribute(element, name, namespace) {
+          if (isUndefined(namespace)) {
+              element.removeAttribute(name);
           }
-          return content.firstChild;
+          else {
+              element.removeAttributeNS(namespace, name);
+          }
+      }
+      function addEventListener(target, type, callback, options) {
+          target.addEventListener(type, callback, options);
+      }
+      function removeEventListener(target, type, callback, options) {
+          target.removeEventListener(type, callback, options);
+      }
+      function dispatchEvent(target, event) {
+          return target.dispatchEvent(event);
+      }
+      function getClassList(element) {
+          return element.classList;
+      }
+      function setCSSStyleProperty(element, name, value, important) {
+          // TODO [#0]: How to avoid this type casting? Shall we use a different type interface to
+          // represent elements in the engine?
+          element.style.setProperty(name, value, important ? 'important' : '');
+      }
+      function getBoundingClientRect(element) {
+          return element.getBoundingClientRect();
+      }
+      function querySelector(element, selectors) {
+          return element.querySelector(selectors);
+      }
+      function querySelectorAll(element, selectors) {
+          return element.querySelectorAll(selectors);
+      }
+      function getElementsByTagName(element, tagNameOrWildCard) {
+          return element.getElementsByTagName(tagNameOrWildCard);
+      }
+      function getElementsByClassName(element, names) {
+          return element.getElementsByClassName(names);
+      }
+      function getChildren(element) {
+          return element.children;
+      }
+      function getChildNodes(element) {
+          return element.childNodes;
+      }
+      function getFirstChild(element) {
+          return element.firstChild;
+      }
+      function getFirstElementChild(element) {
+          return element.firstElementChild;
+      }
+      function getLastChild(element) {
+          return element.lastChild;
+      }
+      function getLastElementChild(element) {
+          return element.lastElementChild;
+      }
+      function isConnected(node) {
+          return node.isConnected;
+      }
+      function assertInstanceOfHTMLElement(elm, msg) {
+          assertInvariant(elm instanceof HTMLElement, msg);
+      }
+      const HTMLElementExported = HTMLElementConstructor;
+      const renderer = {
+          HTMLElementExported,
+          insert,
+          remove,
+          cloneNode,
+          createFragment,
+          createElement,
+          createText,
+          createComment,
+          nextSibling,
+          attachShadow,
+          getProperty,
+          setProperty,
+          setText,
+          getAttribute,
+          setAttribute,
+          removeAttribute,
+          addEventListener,
+          removeEventListener,
+          dispatchEvent,
+          getClassList,
+          setCSSStyleProperty,
+          getBoundingClientRect,
+          querySelector,
+          querySelectorAll,
+          getElementsByTagName,
+          getElementsByClassName,
+          getChildren,
+          getChildNodes,
+          getFirstChild,
+          getFirstElementChild,
+          getLastChild,
+          getLastElementChild,
+          isConnected,
+          assertInstanceOfHTMLElement,
+          defineCustomElement,
+          getCustomElement,
       };
+      // Meant to inherit any properties passed via the base renderer as the argument to the factory.
+      Object.setPrototypeOf(renderer, baseRenderer);
+      return renderer;
   }
 
   /*
@@ -7048,245 +7529,21 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  let getCustomElement;
-  let defineCustomElement;
-  let HTMLElementConstructor;
-  function isCustomElementRegistryAvailable() {
-      if (typeof customElements === 'undefined') {
-          return false;
-      }
-      try {
-          // dereference HTMLElement global because babel wraps globals in compat mode with a
-          // _wrapNativeSuper()
-          // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
-          // get wrapped by babel.
-          const HTMLElementAlias = HTMLElement;
-          // In case we use compat mode with a modern browser, the compat mode transformation
-          // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
-          // which are not equipped to be initialized that way.
-          class clazz extends HTMLElementAlias {
-          }
-          customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
-          new clazz();
-          return true;
-      }
-      catch (_a) {
-          return false;
-      }
-  }
-  if (isCustomElementRegistryAvailable()) {
-      getCustomElement = customElements.get.bind(customElements);
-      defineCustomElement = customElements.define.bind(customElements);
-      HTMLElementConstructor = HTMLElement;
-  }
-  else {
-      const registry = create(null);
-      const reverseRegistry = new WeakMap();
-      defineCustomElement = function define(name, ctor) {
-          if (name !== StringToLowerCase.call(name) || registry[name]) {
-              throw new TypeError(`Invalid Registration`);
-          }
-          registry[name] = ctor;
-          reverseRegistry.set(ctor, name);
-      };
-      getCustomElement = function get(name) {
-          return registry[name];
-      };
-      HTMLElementConstructor = function HTMLElement() {
-          if (!(this instanceof HTMLElement)) {
-              throw new TypeError(`Invalid Invocation`);
-          }
-          const { constructor } = this;
-          const name = reverseRegistry.get(constructor);
-          if (!name) {
-              throw new TypeError(`Invalid Construction`);
-          }
-          const elm = document.createElement(name);
-          setPrototypeOf(elm, constructor.prototype);
-          return elm;
-      };
-      HTMLElementConstructor.prototype = HTMLElement.prototype;
-  }
-  let hydrating = false;
-  function setIsHydrating(value) {
-      hydrating = value;
-  }
-  const ssr = false;
-  function isHydrating() {
-      return hydrating;
-  }
-  const isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
-  const isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
-  function cloneNode(node, deep) {
-      return node.cloneNode(deep);
-  }
-  function createElement$1(tagName, namespace) {
-      return isUndefined$1(namespace)
-          ? document.createElement(tagName)
-          : document.createElementNS(namespace, tagName);
-  }
-  function createText(content) {
-      return document.createTextNode(content);
-  }
-  function createComment(content) {
-      return document.createComment(content);
-  }
-  function insert(node, parent, anchor) {
-      parent.insertBefore(node, anchor);
-  }
-  function remove(node, parent) {
-      parent.removeChild(node);
-  }
-  function nextSibling(node) {
-      return node.nextSibling;
-  }
-  function attachShadow(element, options) {
-      // `hydrating` will be true in two cases:
-      //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
-      //   2. when a webapp author places <c-app> in their static HTML and mounts their
-      //      root component with customeElement.define('c-app', Ctor)
-      //
-      // The second case can be treated as a failed hydration with nominal impact
-      // to performance. However, because <c-app> won't have a <template shadowroot>
-      // declarative child, `element.shadowRoot` is `null`.
-      if (hydrating && element.shadowRoot) {
-          return element.shadowRoot;
-      }
-      return element.attachShadow(options);
-  }
-  function setText(node, content) {
-      node.nodeValue = content;
-  }
-  function getProperty(node, key) {
-      return node[key];
-  }
-  function setProperty(node, key, value) {
-      if (process.env.NODE_ENV !== 'production') {
-          if (node instanceof Element && !(key in node)) {
-              // TODO [#1297]: Move this validation to the compiler
-              assert.fail(`Unknown public property "${key}" of element <${node.tagName}>. This is likely a typo on the corresponding attribute "${htmlPropertyToAttribute(key)}".`);
-          }
-      }
-      node[key] = value;
-  }
-  function getAttribute(element, name, namespace) {
-      return isUndefined$1(namespace)
-          ? element.getAttribute(name)
-          : element.getAttributeNS(namespace, name);
-  }
-  function setAttribute(element, name, value, namespace) {
-      return isUndefined$1(namespace)
-          ? element.setAttribute(name, value)
-          : element.setAttributeNS(namespace, name, value);
-  }
-  function removeAttribute(element, name, namespace) {
-      if (isUndefined$1(namespace)) {
-          element.removeAttribute(name);
-      }
-      else {
-          element.removeAttributeNS(namespace, name);
-      }
-  }
-  function addEventListener(target, type, callback, options) {
-      target.addEventListener(type, callback, options);
-  }
-  function removeEventListener(target, type, callback, options) {
-      target.removeEventListener(type, callback, options);
-  }
-  function dispatchEvent(target, event) {
-      return target.dispatchEvent(event);
-  }
-  function getClassList(element) {
-      return element.classList;
-  }
-  function setCSSStyleProperty(element, name, value, important) {
-      // TODO [#0]: How to avoid this type casting? Shall we use a different type interface to
-      // represent elements in the engine?
-      element.style.setProperty(name, value, important ? 'important' : '');
-  }
-  function getBoundingClientRect(element) {
-      return element.getBoundingClientRect();
-  }
-  function querySelector(element, selectors) {
-      return element.querySelector(selectors);
-  }
-  function querySelectorAll(element, selectors) {
-      return element.querySelectorAll(selectors);
-  }
-  function getElementsByTagName(element, tagNameOrWildCard) {
-      return element.getElementsByTagName(tagNameOrWildCard);
-  }
-  function getElementsByClassName(element, names) {
-      return element.getElementsByClassName(names);
-  }
-  function getChildren(element) {
-      return element.children;
-  }
-  function getChildNodes(element) {
-      return element.childNodes;
-  }
-  function getFirstChild(element) {
-      return element.firstChild;
-  }
-  function getFirstElementChild(element) {
-      return element.firstElementChild;
-  }
-  function getLastChild(element) {
-      return element.lastChild;
-  }
-  function getLastElementChild(element) {
-      return element.lastElementChild;
-  }
-  function isConnected(node) {
-      return node.isConnected;
-  }
-  function assertInstanceOfHTMLElement(elm, msg) {
-      assert.invariant(elm instanceof HTMLElement, msg);
-  }
-  const HTMLElementExported = HTMLElementConstructor;
-  const renderer = {
-      ssr,
-      isNativeShadowDefined,
-      isSyntheticShadowDefined,
-      HTMLElementExported,
-      isHydrating,
-      insert,
-      remove,
-      cloneNode,
-      createFragment,
-      createElement: createElement$1,
-      createText,
-      createComment,
-      nextSibling,
-      attachShadow,
-      getProperty,
-      setProperty,
-      setText,
-      getAttribute,
-      setAttribute,
-      removeAttribute,
-      addEventListener,
-      removeEventListener,
-      dispatchEvent,
-      getClassList,
-      setCSSStyleProperty,
-      getBoundingClientRect,
-      querySelector,
-      querySelectorAll,
-      getElementsByTagName,
-      getElementsByClassName,
-      getChildren,
-      getChildNodes,
-      getFirstChild,
-      getFirstElementChild,
-      getLastChild,
-      getLastElementChild,
-      isConnected,
+  /**
+   * The base renderer that will be used by engine-core.
+   * This will be used for DOM operations when lwc is running in a browser environment.
+   */
+  const renderer = assign(
+  // The base renderer will invoke the factory with null and assign additional properties that are
+  // shared across renderers
+  rendererFactory(null), 
+  // Properties that are either not required to be sandboxed or rely on a globally shared information
+  {
+      // insertStyleSheet implementation shares a global cache of stylesheet data
       insertStylesheet,
-      assertInstanceOfHTMLElement,
-      defineCustomElement,
-      getCustomElement,
-  };
+      isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
+      isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
+  });
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7335,13 +7592,8 @@
           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);
           const vm = createVMWithProps(element, Ctor, props);
           hydrateRoot(vm);
-          // 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
@@ -7352,13 +7604,8 @@
           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);
-      }
   }
 
   /*
@@ -7432,44 +7679,60 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  // TODO [#2472]: Remove this workaround when appropriate.
   // eslint-disable-next-line @lwc/lwc-internal/no-global-node
+
   const _Node$1 = Node;
   const ConnectingSlot = new WeakMap();
   const DisconnectingSlot = new WeakMap();
+
   function callNodeSlot(node, slot) {
-      if (process.env.NODE_ENV !== 'production') {
-          assert.isTrue(node, `callNodeSlot() should not be called for a non-object`);
-      }
-      const fn = slot.get(node);
-      if (!isUndefined$1(fn)) {
-          fn(node);
-      }
-      return node; // for convenience
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(node, `callNodeSlot() should not be called for a non-object`);
+    }
+
+    const fn = slot.get(node);
+
+    if (!isUndefined$1(fn)) {
+      fn(node);
+    }
+
+    return node; // for convenience
   }
-  // Monkey patching Node methods to be able to detect the insertions and removal of root elements
-  // created via createElement.
-  const { appendChild, insertBefore, removeChild, replaceChild } = _Node$1.prototype;
-  assign(_Node$1.prototype, {
+
+  if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+    // Monkey patching Node methods to be able to detect the insertions and removal of root elements
+    // created via createElement.
+    const {
+      appendChild,
+      insertBefore,
+      removeChild,
+      replaceChild
+    } = _Node$1.prototype;
+    assign(_Node$1.prototype, {
       appendChild(newChild) {
-          const appendedNode = appendChild.call(this, newChild);
-          return callNodeSlot(appendedNode, ConnectingSlot);
+        const appendedNode = appendChild.call(this, newChild);
+        return callNodeSlot(appendedNode, ConnectingSlot);
       },
+
       insertBefore(newChild, referenceNode) {
-          const insertedNode = insertBefore.call(this, newChild, referenceNode);
-          return callNodeSlot(insertedNode, ConnectingSlot);
+        const insertedNode = insertBefore.call(this, newChild, referenceNode);
+        return callNodeSlot(insertedNode, ConnectingSlot);
       },
+
       removeChild(oldChild) {
-          const removedNode = removeChild.call(this, oldChild);
-          return callNodeSlot(removedNode, DisconnectingSlot);
+        const removedNode = removeChild.call(this, oldChild);
+        return callNodeSlot(removedNode, DisconnectingSlot);
       },
+
       replaceChild(newChild, oldChild) {
-          const replacedNode = replaceChild.call(this, newChild, oldChild);
-          callNodeSlot(replacedNode, DisconnectingSlot);
-          callNodeSlot(newChild, ConnectingSlot);
-          return replacedNode;
-      },
-  });
+        const replacedNode = replaceChild.call(this, newChild, oldChild);
+        callNodeSlot(replacedNode, DisconnectingSlot);
+        callNodeSlot(newChild, ConnectingSlot);
+        return replacedNode;
+      }
+
+    });
+  }
   /**
    * EXPERIMENTAL: This function is almost identical to document.createElement with the slightly
    * difference that in the options, you can pass the `is` property set to a Constructor instead of
@@ -7481,38 +7744,50 @@
    * const el = createElement('x-foo', { is: FooCtor });
    * ```
    */
+
+
   function createElement(sel, options) {
-      if (!isObject(options) || isNull(options)) {
-          throw new TypeError(`"createElement" function expects an object as second parameter but received "${toString$1(options)}".`);
-      }
-      const Ctor = options.is;
-      if (!isFunction$1(Ctor)) {
-          throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
-      }
-      const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
-      let wasComponentUpgraded = false;
-      // the custom element from the registry is expecting an upgrade callback
-      /**
-       * Note: if the upgradable constructor does not expect, or throw when we new it
-       * with a callback as the first argument, we could implement a more advanced
-       * mechanism that only passes that argument if the constructor is known to be
-       * an upgradable custom element.
-       */
-      const element = new UpgradableConstructor((elm) => {
-          createVM(elm, Ctor, renderer, {
-              tagName: sel,
-              mode: options.mode !== 'closed' ? 'open' : 'closed',
-              owner: null,
-          });
-          ConnectingSlot.set(elm, connectRootElement);
-          DisconnectingSlot.set(elm, disconnectRootElement);
-          wasComponentUpgraded = true;
+    if (!isObject(options) || isNull(options)) {
+      throw new TypeError(`"createElement" function expects an object as second parameter but received "${toString$1(options)}".`);
+    }
+
+    const Ctor = options.is;
+
+    if (!isFunction$1(Ctor)) {
+      throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
+    }
+
+    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+    let wasComponentUpgraded = false; // the custom element from the registry is expecting an upgrade callback
+
+    /**
+     * Note: if the upgradable constructor does not expect, or throw when we new it
+     * with a callback as the first argument, we could implement a more advanced
+     * mechanism that only passes that argument if the constructor is known to be
+     * an upgradable custom element.
+     */
+
+    const element = new UpgradableConstructor(elm => {
+      createVM(elm, Ctor, renderer, {
+        tagName: sel,
+        mode: options.mode !== 'closed' ? 'open' : 'closed',
+        owner: null
       });
-      if (!wasComponentUpgraded) {
-          /* eslint-disable-next-line no-console */
-          console.error(`Unexpected tag name "${sel}". This name is a registered custom element, preventing LWC to upgrade the element.`);
+
+      if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        ConnectingSlot.set(elm, connectRootElement);
+        DisconnectingSlot.set(elm, disconnectRootElement);
       }
-      return element;
+
+      wasComponentUpgraded = true;
+    });
+
+    if (!wasComponentUpgraded) {
+      /* eslint-disable-next-line no-console */
+      console.error(`Unexpected tag name "${sel}". This name is a registered custom element, preventing LWC to upgrade the element.`);
+    }
+
+    return element;
   }
 
   /*
@@ -7546,7 +7821,7 @@
       }
       // 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.
-      return isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
+      return renderer.isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
   }
 
   /*
@@ -7583,7 +7858,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.22.0 */
+  /* version: 2.23.2 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -7605,6 +7880,7 @@
   exports.registerDecorators = registerDecorators;
   exports.registerTemplate = registerTemplate;
   exports.renderer = renderer;
+  exports.rendererFactory = rendererFactory;
   exports.sanitizeAttribute = sanitizeAttribute;
   exports.setFeatureFlag = setFeatureFlag;
   exports.setFeatureFlagForTest = setFeatureFlagForTest;