lwc 2.22.0 → 2.23.2

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

@@ -365,9 +365,13 @@ var LWC = (function (exports) {
   // Increment whenever the LWC template compiler changes
 
 
-  var LWC_VERSION = "2.22.0";
+  var LWC_VERSION = "2.23.2";
   var 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.
@@ -377,7 +381,7 @@ var LWC = (function (exports) {
    */
 
   function detect(propName) {
-    return Object.getOwnPropertyDescriptor(Element.prototype, propName) === undefined;
+    return getOwnPropertyDescriptor$1(Element.prototype, propName) === undefined;
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -457,6 +461,8 @@ var LWC = (function (exports) {
       patch$1(propName);
     }
   }
+  /** version: 2.23.2 */
+
   /**
    * Copyright (C) 2018 salesforce.com, inc.
    */
@@ -477,6 +483,7 @@ var LWC = (function (exports) {
     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,
@@ -489,7 +496,7 @@ var LWC = (function (exports) {
     });
   }
 
-  var runtimeFlags = _globalThis.lwcRuntimeFlags;
+  var 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.
@@ -519,10 +526,10 @@ var LWC = (function (exports) {
 
     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
-      var runtimeValue = runtimeFlags[name];
+      var runtimeValue = lwcRuntimeFlags[name];
 
       if (!isUndefined$1(runtimeValue)) {
         // eslint-disable-next-line no-console
@@ -530,7 +537,7 @@ var LWC = (function (exports) {
         return;
       }
 
-      defineProperty(runtimeFlags, name, {
+      defineProperty(lwcRuntimeFlags, name, {
         value: value
       });
     }
@@ -546,7 +553,7 @@ var LWC = (function (exports) {
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.22.0 */
+  /** version: 2.23.2 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -561,7 +568,7 @@ var LWC = (function (exports) {
     window.addEventListener('test-dummy-flag', function () {
       var hasFlag = false;
 
-      if (runtimeFlags.DUMMY_TEST_FLAG) {
+      if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
         hasFlag = true;
       }
 
@@ -588,7 +595,7 @@ var LWC = (function (exports) {
     window.addEventListener('test-dummy-flag', function () {
       var hasFlag = false;
 
-      if (runtimeFlags.DUMMY_TEST_FLAG) {
+      if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
         hasFlag = true;
       }
 
@@ -988,8 +995,8 @@ var LWC = (function (exports) {
   // to inject at runtime.
 
 
-  var HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
-  var HTMLElementPrototype = HTMLElementConstructor$1.prototype;
+  var HTMLElementConstructor = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
+  var HTMLElementPrototype = HTMLElementConstructor.prototype;
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1209,10 +1216,10 @@ var LWC = (function (exports) {
     }; // Apply extra restriction related to DOM manipulation if the element is not a portal.
 
     if (!options.isLight && !options.isPortal) {
-      var _appendChild = elm.appendChild,
-          _insertBefore = elm.insertBefore,
-          _removeChild = elm.removeChild,
-          _replaceChild = elm.replaceChild;
+      var appendChild = elm.appendChild,
+          insertBefore = elm.insertBefore,
+          removeChild = elm.removeChild,
+          replaceChild = elm.replaceChild;
       var originalNodeValueDescriptor = getPropertyDescriptor(elm, 'nodeValue');
       var originalInnerHTMLDescriptor = getPropertyDescriptor(elm, 'innerHTML');
       var originalTextContentDescriptor = getPropertyDescriptor(elm, 'textContent');
@@ -1220,7 +1227,7 @@ var LWC = (function (exports) {
         appendChild: generateDataDescriptor({
           value: function value(aChild) {
             logMissingPortalError('appendChild', 'method');
-            return _appendChild.call(this, aChild);
+            return appendChild.call(this, aChild);
           }
         }),
         insertBefore: generateDataDescriptor({
@@ -1229,7 +1236,7 @@ var LWC = (function (exports) {
               logMissingPortalError('insertBefore', 'method');
             }
 
-            return _insertBefore.call(this, newNode, referenceNode);
+            return insertBefore.call(this, newNode, referenceNode);
           }
         }),
         removeChild: generateDataDescriptor({
@@ -1238,13 +1245,13 @@ var LWC = (function (exports) {
               logMissingPortalError('removeChild', 'method');
             }
 
-            return _removeChild.call(this, aChild);
+            return removeChild.call(this, aChild);
           }
         }),
         replaceChild: generateDataDescriptor({
           value: function value(newChild, oldChild) {
             logMissingPortalError('replaceChild', 'method');
-            return _replaceChild.call(this, newChild, oldChild);
+            return replaceChild.call(this, newChild, oldChild);
           }
         }),
         nodeValue: generateAccessorDescriptor({
@@ -1477,6 +1484,15 @@ var LWC = (function (exports) {
   function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
   }
+
+  function updateComponentValue(vm, key, newValue) {
+    var cmpFields = vm.cmpFields;
+
+    if (newValue !== cmpFields[key]) {
+      cmpFields[key] = newValue;
+      componentValueMutated(vm, key);
+    }
+  }
   /**
    * Copyright (C) 2017 salesforce.com, inc.
    */
@@ -2372,11 +2388,7 @@ var LWC = (function (exports) {
           assert.invariant(!isObject(newValue) || isNull(newValue), "Invalid value \"".concat(newValue, "\" for \"").concat(propName, "\" of ").concat(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);
       }
     };
@@ -2400,9 +2412,8 @@ var LWC = (function (exports) {
     var bridge = def.bridge;
 
     if (process.env.NODE_ENV !== 'production') {
-      var _assertInstanceOfHTMLElement = vm.renderer.assertInstanceOfHTMLElement;
-
-      _assertInstanceOfHTMLElement(vm.elm, "Component creation requires a DOM element to be associated to ".concat(vm, "."));
+      var assertInstanceOfHTMLElement = vm.renderer.assertInstanceOfHTMLElement;
+      assertInstanceOfHTMLElement(vm.elm, "Component creation requires a DOM element to be associated to ".concat(vm, "."));
     }
 
     var component = this;
@@ -2752,11 +2763,7 @@ var LWC = (function (exports) {
       },
       set: function set(newValue) {
         var vm = getAssociatedVM(this);
-
-        if (newValue !== vm.cmpFields[key]) {
-          vm.cmpFields[key] = newValue;
-          componentValueMutated(vm, key);
-        }
+        updateComponentValue(vm, key, newValue);
       },
       enumerable: true,
       configurable: true
@@ -2910,7 +2917,7 @@ var LWC = (function (exports) {
         }
 
         if (_set2) {
-          if (runtimeFlags.ENABLE_REACTIVE_SETTER) {
+          if (lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
             var ro = vm.oar[key];
 
             if (isUndefined$1(ro)) {
@@ -2974,11 +2981,7 @@ var LWC = (function (exports) {
         }
 
         var reactiveOrAnyValue = getReactiveProxy(newValue);
-
-        if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-          vm.cmpFields[key] = reactiveOrAnyValue;
-          componentValueMutated(vm, key);
-        }
+        updateComponentValue(vm, key, reactiveOrAnyValue);
       },
       enumerable: true,
       configurable: true
@@ -3022,10 +3025,7 @@ var LWC = (function (exports) {
          * 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
@@ -3590,7 +3590,7 @@ var LWC = (function (exports) {
     return HTMLBridgeElement;
   }
 
-  var BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor$1, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+  var BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
   freeze(BaseBridgeElement);
   seal(BaseBridgeElement.prototype);
   /*
@@ -3682,7 +3682,7 @@ var LWC = (function (exports) {
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       var visited = new Set();
 
       while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
@@ -3700,7 +3700,7 @@ var LWC = (function (exports) {
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       var visited = new Set();
 
       while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
@@ -3718,7 +3718,7 @@ var LWC = (function (exports) {
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       var visited = new Set();
 
       while (swappedStyleMap.has(style) && !visited.has(style)) {
@@ -3736,7 +3736,7 @@ var LWC = (function (exports) {
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       // tracking active component
       var Ctor = vm.def.ctor;
       var componentVMs = activeComponents.get(Ctor);
@@ -3794,7 +3794,7 @@ var LWC = (function (exports) {
       throw new ReferenceError();
     }
 
-    if (runtimeFlags.ENABLE_HMR) {
+    if (lwcRuntimeFlags.ENABLE_HMR) {
       // tracking inactive component
       var Ctor = vm.def.ctor;
       var list = activeComponents.get(Ctor);
@@ -3842,7 +3842,7 @@ var LWC = (function (exports) {
       }
     }
 
-    if (!runtimeFlags.ENABLE_HMR) {
+    if (!lwcRuntimeFlags.ENABLE_HMR) {
       throw new Error('HMR is not enabled');
     }
 
@@ -3859,7 +3859,7 @@ var LWC = (function (exports) {
       }
     }
 
-    if (!runtimeFlags.ENABLE_HMR) {
+    if (!lwcRuntimeFlags.ENABLE_HMR) {
       throw new Error('HMR is not enabled');
     }
 
@@ -3874,7 +3874,7 @@ var LWC = (function (exports) {
       return rehydrateHotStyle(oldStyle);
     }
 
-    if (!runtimeFlags.ENABLE_HMR) {
+    if (!lwcRuntimeFlags.ENABLE_HMR) {
       throw new Error('HMR is not enabled');
     }
 
@@ -4348,9 +4348,7 @@ var LWC = (function (exports) {
   function createStylesheet(vm, stylesheets) {
     var renderMode = vm.renderMode,
         shadowMode = vm.shadowMode,
-        _vm$renderer2 = vm.renderer,
-        ssr = _vm$renderer2.ssr,
-        insertStylesheet = _vm$renderer2.insertStylesheet;
+        insertStylesheet = vm.renderer.insertStylesheet;
 
     if (renderMode === 1
     /* RenderMode.Shadow */
@@ -4360,7 +4358,7 @@ var LWC = (function (exports) {
       for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
         insertStylesheet(stylesheets[_i12]);
       }
-    } 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.
@@ -4387,6 +4385,18 @@ var LWC = (function (exports) {
    */
 
 
+  function checkHasVM(elm) {
+    var 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 \"".concat(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) {
     var getCustomElement = renderer.getCustomElement,
         RendererHTMLElement = renderer.HTMLElementExported,
@@ -4428,6 +4438,20 @@ var LWC = (function (exports) {
       return _createClass(LWCUpgradableElement);
     }(RendererHTMLElement);
 
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      CE.prototype.connectedCallback = function () {
+        if (checkHasVM(this)) {
+          connectRootElement(this);
+        }
+      };
+
+      CE.prototype.disconnectedCallback = function () {
+        if (checkHasVM(this)) {
+          disconnectRootElement(this);
+        }
+      };
+    }
+
     defineCustomElement(tagName, CE);
     return CE;
   }
@@ -4539,6 +4563,15 @@ var LWC = (function (exports) {
       // 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 \"".concat(key, "\" of element <").concat(elm.tagName.toLowerCase(), ">. This is either a typo on the corresponding attribute \"").concat(htmlPropertyToAttribute(key), "\", or the attribute does not exist in this browser or DOM implementation."));
+          }
+        }
+
         setProperty(elm, key, cur);
       }
     }
@@ -4746,7 +4779,7 @@ var LWC = (function (exports) {
     }
   }
 
-  function patch(n1, n2, renderer) {
+  function patch(n1, n2, parent, renderer) {
     var _a, _b;
 
     if (n1 === n2) {
@@ -4795,7 +4828,7 @@ var LWC = (function (exports) {
       case 3
       /* VNodeType.CustomElement */
       :
-        patchCustomElement(n1, n2, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+        patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
         break;
     }
   }
@@ -4951,13 +4984,19 @@ var LWC = (function (exports) {
     insertNode(elm, parent, anchor, renderer);
 
     if (vm) {
-      if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(vm.state === 0
-        /* VMState.created */
-        , "".concat(vm, " cannot be recycled."));
-      }
+      {
+        if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+          if (process.env.NODE_ENV !== 'production') {
+            // 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 */
+            , "".concat(vm, " cannot be recycled."));
+          }
 
-      runConnectedCallback(vm);
+          runConnectedCallback(vm);
+        }
+      }
     }
 
     mountVNodes(vnode.children, elm, renderer, null);
@@ -4967,25 +5006,34 @@ var LWC = (function (exports) {
     }
   }
 
-  function patchCustomElement(n1, n2, renderer) {
-    var elm = n2.elm = n1.elm;
-    var vm = n2.vm = n1.vm;
-    patchElementPropsAndAttrs$1(n1, n2, renderer);
+  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.
+      var 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.
+      var elm = n2.elm = n1.elm;
+      var 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
-    // will happen, but in native, it does allocate the light dom
+      if (!isUndefined$1(vm)) {
+        // in fallback mode, the allocation will always set children to
+        // empty and delegate the real allocation to the slot elements
+        allocateChildren(n2, vm);
+      } // in fallback mode, the children will be always empty, so, nothing
+      // will happen, but in native, it does allocate the light dom
 
 
-    patchChildren(n1.children, n2.children, elm, renderer);
+      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);
+      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);
+      }
     }
   }
 
@@ -5138,10 +5186,10 @@ var LWC = (function (exports) {
     var scopeToken = getScopeTokenClass(owner);
 
     if (!isNull(scopeToken)) {
-      var _getClassList = renderer.getClassList; // TODO [#2762]: this dot notation with add is probably problematic
+      var getClassList = renderer.getClassList; // 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);
+      getClassList(elm).add(scopeToken);
     } // Set property element for synthetic shadow DOM style scoping.
 
 
@@ -5354,22 +5402,22 @@ var LWC = (function (exports) {
       } else if (!isVNode(newEndVnode)) {
         newEndVnode = newCh[--newEndIdx];
       } else if (isSameVnode(oldStartVnode, newStartVnode)) {
-        patch(oldStartVnode, newStartVnode, renderer);
+        patch(oldStartVnode, newStartVnode, parent, renderer);
         oldStartVnode = oldCh[++oldStartIdx];
         newStartVnode = newCh[++newStartIdx];
       } else if (isSameVnode(oldEndVnode, newEndVnode)) {
-        patch(oldEndVnode, newEndVnode, renderer);
+        patch(oldEndVnode, newEndVnode, parent, renderer);
         oldEndVnode = oldCh[--oldEndIdx];
         newEndVnode = newCh[--newEndIdx];
       } else if (isSameVnode(oldStartVnode, newEndVnode)) {
         // Vnode moved right
-        patch(oldStartVnode, newEndVnode, renderer);
+        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, renderer);
+        patch(oldEndVnode, newStartVnode, parent, renderer);
         insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
         oldEndVnode = oldCh[--oldEndIdx];
         newStartVnode = newCh[++newStartIdx];
@@ -5392,7 +5440,7 @@ var LWC = (function (exports) {
               // 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.
+              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`
@@ -5462,7 +5510,7 @@ var LWC = (function (exports) {
         if (isVNode(n1)) {
           if (isVNode(n2)) {
             // both vnodes are equivalent, and we just need to patch them
-            patch(n1, n2, renderer);
+            patch(n1, n2, parent, renderer);
             anchor = n2.elm;
           } else {
             // removing the old vnode since the new one is null
@@ -5877,19 +5925,11 @@ var LWC = (function (exports) {
 
     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.
-   */
-
-
-  var DynamicImportedComponentMap = new Map();
-  var dynamicImportedComponentCounter = 0;
   /**
    * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
    */
 
+
   function dc(sel, Ctor, data) {
     var children = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : EmptyArray;
 
@@ -5908,22 +5948,7 @@ var LWC = (function (exports) {
       throw new Error("Invalid LWC Constructor ".concat(toString$1(Ctor), " for custom element <").concat(sel, ">."));
     }
 
-    var 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.
-
-
-    var newData = Object.assign(Object.assign({}, data), {
-      key: "dc:".concat(idx, ":").concat(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
@@ -6770,7 +6795,7 @@ var LWC = (function (exports) {
         return "[object:vm ".concat(def.name, " (").concat(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 */
         ;
@@ -6805,7 +6830,7 @@ var LWC = (function (exports) {
       } 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 */
           ) {
@@ -6931,13 +6956,7 @@ var LWC = (function (exports) {
   }
 
   function runRenderedCallback(vm) {
-    var renderedCallback = vm.def.renderedCallback,
-        ssr = vm.renderer.ssr;
-
-    if (isTrue(ssr)) {
-      return;
-    }
-
+    var renderedCallback = vm.def.renderedCallback;
     var rendered = Services.rendered;
 
     if (rendered) {
@@ -7169,9 +7188,7 @@ var LWC = (function (exports) {
   }
 
   function scheduleRehydration(vm) {
-    var ssr = vm.renderer.ssr;
-
-    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
+    if (isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -7293,13 +7310,8 @@ var LWC = (function (exports) {
   }( /*#__PURE__*/_wrapNativeSuper(CustomEvent));
 
   function createFieldDataCallback(vm, name) {
-    var cmpFields = vm.cmpFields;
     return function (value) {
-      if (value !== vm.cmpFields[name]) {
-        // storing the value in the underlying storage
-        cmpFields[name] = value;
-        componentValueMutated(vm, name);
-      }
+      updateComponentValue(vm, name, value);
     };
   }
 
@@ -7512,7 +7524,7 @@ var LWC = (function (exports) {
           ArrayPush$1.call(wiredConnecting, function () {
             connector.connect();
 
-            if (!runtimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+            if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
               if (hasDynamicParams) {
                 Promise.resolve().then(computeConfigAndUpdate);
                 return;
@@ -7692,6 +7704,8 @@ var LWC = (function (exports) {
     return renderer.nextSibling(hydratedNode);
   }
 
+  var NODE_VALUE_PROP = 'nodeValue';
+
   function hydrateText(node, vnode, renderer) {
     var _a;
 
@@ -7702,9 +7716,8 @@ var LWC = (function (exports) {
     }
 
     if (process.env.NODE_ENV !== 'production') {
-      var _getProperty = renderer.getProperty;
-
-      var nodeValue = _getProperty(node, 'nodeValue');
+      var getProperty = renderer.getProperty;
+      var 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);
@@ -7727,9 +7740,8 @@ var LWC = (function (exports) {
     }
 
     if (process.env.NODE_ENV !== 'production') {
-      var _getProperty2 = renderer.getProperty;
-
-      var nodeValue = _getProperty2(node, 'nodeValue');
+      var getProperty = renderer.getProperty;
+      var 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);
@@ -7737,7 +7749,7 @@ var LWC = (function (exports) {
     }
 
     var setProperty = renderer.setProperty;
-    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;
   }
@@ -7769,17 +7781,17 @@ var LWC = (function (exports) {
       // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
       // remove the innerHTML from props so it reuses the existing dom elements.
       var props = vnode.data.props;
-      var _getProperty3 = renderer.getProperty;
+      var getProperty = renderer.getProperty;
 
       if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-        if (_getProperty3(elm, 'innerHTML') === props.innerHTML) {
+        if (getProperty(elm, 'innerHTML') === props.innerHTML) {
           // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
           vnode.data = Object.assign(Object.assign({}, vnode.data), {
             props: cloneAndOmitKey(props, 'innerHTML')
           });
         } else {
           if (process.env.NODE_ENV !== 'production') {
-            logWarn("Mismatch hydrating element <".concat(_getProperty3(elm, 'tagName').toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), owner);
+            logWarn("Mismatch hydrating element <".concat(getProperty(elm, 'tagName').toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), owner);
           }
         }
       }
@@ -7788,8 +7800,8 @@ var LWC = (function (exports) {
     patchElementPropsAndAttrs(vnode, renderer);
 
     if (!isDomManual) {
-      var _getFirstChild = renderer.getFirstChild;
-      hydrateChildren(_getFirstChild(elm), vnode.children, elm, owner);
+      var getFirstChild = renderer.getFirstChild;
+      hydrateChildren(getFirstChild(elm), vnode.children, elm, owner);
     }
 
     return elm;
@@ -7828,10 +7840,10 @@ var LWC = (function (exports) {
     if (vm.renderMode !== 0
     /* RenderMode.Light */
     ) {
-      var _getFirstChild2 = renderer.getFirstChild; // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+      var getFirstChild = renderer.getFirstChild; // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
       // Note: for Light DOM, this is handled while hydrating the VM
 
-      hydrateChildren(_getFirstChild2(elm), vnode.children, elm, vm);
+      hydrateChildren(getFirstChild(elm), vnode.children, elm, vm);
     }
 
     hydrateVM(vm);
@@ -7880,11 +7892,11 @@ var LWC = (function (exports) {
       // next node in the list to be hydrated.
 
 
-      var _nextSibling = renderer.nextSibling;
+      var nextSibling = renderer.nextSibling;
 
       do {
         var current = nextNode;
-        nextNode = _nextSibling(nextNode);
+        nextNode = nextSibling(nextNode);
         removeNode(current, parentNode, renderer);
       } while (nextNode);
     }
@@ -7947,14 +7959,13 @@ var LWC = (function (exports) {
           attrValue = _Object$entries$_i[1];
 
       var owner = vnode.owner;
-      var _getAttribute = renderer.getAttribute;
-
-      var elmAttrValue = _getAttribute(elm, attrName);
+      var getAttribute = renderer.getAttribute;
+      var elmAttrValue = getAttribute(elm, attrName);
 
       if (String(attrValue) !== elmAttrValue) {
         if (process.env.NODE_ENV !== 'production') {
-          var _getProperty4 = renderer.getProperty;
-          logError("Mismatch hydrating element <".concat(_getProperty4(elm, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), owner);
+          var getProperty = renderer.getProperty;
+          logError("Mismatch hydrating element <".concat(getProperty(elm, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), owner);
         }
 
         nodesAreCompatible = false;
@@ -8065,8 +8076,8 @@ var LWC = (function (exports) {
 
     if (!nodesAreCompatible) {
       if (process.env.NODE_ENV !== 'production') {
-        var _getProperty5 = renderer.getProperty;
-        logError("Mismatch hydrating element <".concat(_getProperty5(elm, 'tagName').toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
+        var getProperty = renderer.getProperty;
+        logError("Mismatch hydrating element <".concat(getProperty(elm, 'tagName').toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
       }
     }
 
@@ -8086,7 +8097,7 @@ var LWC = (function (exports) {
         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
@@ -8098,7 +8109,7 @@ var LWC = (function (exports) {
         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
@@ -8298,7 +8309,7 @@ var LWC = (function (exports) {
 
     return ctor;
   }
-  /* version: 2.22.0 */
+  /* version: 2.23.2 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8465,379 +8476,395 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
+  /**
+   * 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'.
+   */
 
-  var SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
-  var createFragment;
 
-  if (SUPPORTS_TEMPLATE) {
-    // Parse the fragment HTML string into DOM
-    createFragment = function createFragment(html) {
-      var 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.
-    var 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
-
-    var getTagName = function getTagName(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 createFragment(html) {
-      var wrapperTags = topLevelWrappingMap[getTagName(html)];
-
-      if (!isUndefined$1(wrapperTags)) {
-        var _iterator5 = _createForOfIteratorHelper(wrapperTags),
-            _step5;
+  function rendererFactory(baseRenderer) {
+    // Util functions
+    function assertInvariant(value, msg) {
+      if (!value) {
+        throw new Error("Invariant Violation: ".concat(msg));
+      }
+    }
 
-        try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var wrapperTag = _step5.value;
-            html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
-          }
-        } catch (err) {
-          _iterator5.e(err);
-        } finally {
-          _iterator5.f();
-        }
-      } // 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
+    function isNull(obj) {
+      return obj === null;
+    }
 
+    function isUndefined(obj) {
+      return obj === undefined;
+    }
 
-      var doc = document.implementation.createHTMLDocument('');
-      doc.body.innerHTML = html;
-      var content = doc.body;
+    var getCustomElement;
+    var defineCustomElement;
+    var HTMLElementConstructor;
 
-      if (!isUndefined$1(wrapperTags)) {
-        for (var _i32 = 0; _i32 < wrapperTags.length; _i32++) {
-          content = content.firstChild;
-        }
+    function isCustomElementRegistryAvailable() {
+      if (typeof customElements === 'undefined') {
+        return false;
       }
 
-      return content.firstChild;
-    };
-  }
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
+      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.
+        var 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.
 
+        var clazz = /*#__PURE__*/function (_HTMLElementAlias) {
+          _inherits(clazz, _HTMLElementAlias);
 
-  var getCustomElement;
-  var defineCustomElement;
-  var HTMLElementConstructor;
+          var _super7 = _createSuper(clazz);
 
-  function isCustomElementRegistryAvailable() {
-    if (typeof customElements === 'undefined') {
-      return false;
-    }
+          function clazz() {
+            _classCallCheck(this, clazz);
 
-    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.
-      var 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.
+            return _super7.apply(this, arguments);
+          }
 
-      var clazz = /*#__PURE__*/function (_HTMLElementAlias) {
-        _inherits(clazz, _HTMLElementAlias);
+          return _createClass(clazz);
+        }(HTMLElementAlias);
 
-        var _super7 = _createSuper(clazz);
+        customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
+        new clazz();
+        return true;
+      } catch (_a) {
+        return false;
+      }
+    }
 
-        function clazz() {
-          _classCallCheck(this, clazz);
+    if (isCustomElementRegistryAvailable()) {
+      getCustomElement = customElements.get.bind(customElements);
+      defineCustomElement = customElements.define.bind(customElements);
+      HTMLElementConstructor = HTMLElement;
+    } else {
+      var registry = Object.create(null);
+      var reverseRegistry = new WeakMap();
 
-          return _super7.apply(this, arguments);
+      defineCustomElement = function define(name, ctor) {
+        if (name !== String.prototype.toLowerCase.call(name) || registry[name]) {
+          throw new TypeError("Invalid Registration");
         }
 
-        return _createClass(clazz);
-      }(HTMLElementAlias);
+        registry[name] = ctor;
+        reverseRegistry.set(ctor, name);
+      };
 
-      customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
-      new clazz();
-      return true;
-    } catch (_a) {
-      return false;
-    }
-  }
+      getCustomElement = function get(name) {
+        return registry[name];
+      };
 
-  if (isCustomElementRegistryAvailable()) {
-    getCustomElement = customElements.get.bind(customElements);
-    defineCustomElement = customElements.define.bind(customElements);
-    HTMLElementConstructor = HTMLElement;
-  } else {
-    var registry = create(null);
-    var reverseRegistry = new WeakMap();
+      HTMLElementConstructor = function HTMLElement() {
+        if (!(this instanceof HTMLElement)) {
+          throw new TypeError("Invalid Invocation");
+        }
 
-    defineCustomElement = function define(name, ctor) {
-      if (name !== StringToLowerCase.call(name) || registry[name]) {
-        throw new TypeError("Invalid Registration");
-      }
+        var constructor = this.constructor;
+        var name = reverseRegistry.get(constructor);
 
-      registry[name] = ctor;
-      reverseRegistry.set(ctor, name);
-    };
+        if (!name) {
+          throw new TypeError("Invalid Construction");
+        }
 
-    getCustomElement = function get(name) {
-      return registry[name];
-    };
+        var elm = document.createElement(name);
+        Object.setPrototypeOf(elm, constructor.prototype);
+        return elm;
+      };
 
-    HTMLElementConstructor = function HTMLElement() {
-      if (!(this instanceof HTMLElement)) {
-        throw new TypeError("Invalid Invocation");
-      }
+      HTMLElementConstructor.prototype = HTMLElement.prototype;
+    }
 
-      var constructor = this.constructor;
-      var name = reverseRegistry.get(constructor);
+    function cloneNode(node, deep) {
+      return node.cloneNode(deep);
+    }
 
-      if (!name) {
-        throw new TypeError("Invalid Construction");
-      }
+    function createElement(tagName, namespace) {
+      return isUndefined(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
+    }
 
-      var elm = document.createElement(name);
-      setPrototypeOf(elm, constructor.prototype);
-      return elm;
-    };
+    function createText(content) {
+      return document.createTextNode(content);
+    }
 
-    HTMLElementConstructor.prototype = HTMLElement.prototype;
-  }
+    function createComment(content) {
+      return document.createComment(content);
+    }
 
-  var hydrating = false;
+    var createFragment; // IE11 lacks support for this feature
 
-  function setIsHydrating(value) {
-    hydrating = value;
-  }
+    var SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
 
-  var ssr = false;
+    if (SUPPORTS_TEMPLATE) {
+      // Parse the fragment HTML string into DOM
+      createFragment = function createFragment(html) {
+        var 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.
+      var 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
+
+      var getTagName = function getTagName(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 createFragment(html) {
+        var wrapperTags = topLevelWrappingMap[getTagName(html)];
+
+        if (!isUndefined(wrapperTags)) {
+          var _iterator5 = _createForOfIteratorHelper(wrapperTags),
+              _step5;
+
+          try {
+            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+              var wrapperTag = _step5.value;
+              html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
+            }
+          } catch (err) {
+            _iterator5.e(err);
+          } finally {
+            _iterator5.f();
+          }
+        } // 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
 
-  function isHydrating() {
-    return hydrating;
-  }
 
-  var isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
-  var isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
+        var doc = document.implementation.createHTMLDocument('');
+        doc.body.innerHTML = html;
+        var content = doc.body;
 
-  function cloneNode(node, deep) {
-    return node.cloneNode(deep);
-  }
+        if (!isUndefined(wrapperTags)) {
+          for (var _i32 = 0; _i32 < wrapperTags.length; _i32++) {
+            content = content.firstChild;
+          }
+        }
 
-  function createElement$1(tagName, namespace) {
-    return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
-  }
+        return content.firstChild;
+      };
+    }
 
-  function createText(content) {
-    return document.createTextNode(content);
-  }
+    function insert(node, parent, anchor) {
+      parent.insertBefore(node, anchor);
+    }
 
-  function createComment(content) {
-    return document.createComment(content);
-  }
+    function remove(node, parent) {
+      parent.removeChild(node);
+    }
 
-  function insert(node, parent, anchor) {
-    parent.insertBefore(node, anchor);
-  }
+    function nextSibling(node) {
+      return node.nextSibling;
+    }
 
-  function remove(node, parent) {
-    parent.removeChild(node);
-  }
+    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;
+      }
 
-  function nextSibling(node) {
-    return node.nextSibling;
-  }
+      return element.attachShadow(options);
+    }
 
-  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;
+    function setText(node, content) {
+      node.nodeValue = content;
     }
 
-    return element.attachShadow(options);
-  }
+    function getProperty(node, key) {
+      return node[key];
+    }
 
-  function setText(node, content) {
-    node.nodeValue = content;
-  }
+    function setProperty(node, key, value) {
+      node[key] = value;
+    }
 
-  function getProperty(node, key) {
-    return node[key];
-  }
+    function getAttribute(element, name, namespace) {
+      return isUndefined(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
+    }
 
-  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 \"".concat(key, "\" of element <").concat(node.tagName, ">. This is likely a typo on the corresponding attribute \"").concat(htmlPropertyToAttribute(key), "\"."));
+    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);
+      } else {
+        element.removeAttributeNS(namespace, name);
       }
     }
 
-    node[key] = value;
-  }
+    function addEventListener(target, type, callback, options) {
+      target.addEventListener(type, callback, options);
+    }
 
-  function getAttribute(element, name, namespace) {
-    return isUndefined$1(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
-  }
+    function removeEventListener(target, type, callback, options) {
+      target.removeEventListener(type, callback, options);
+    }
 
-  function setAttribute(element, name, value, namespace) {
-    return isUndefined$1(namespace) ? element.setAttribute(name, value) : element.setAttributeNS(namespace, name, value);
-  }
+    function dispatchEvent(target, event) {
+      return target.dispatchEvent(event);
+    }
 
-  function removeAttribute(element, name, namespace) {
-    if (isUndefined$1(namespace)) {
-      element.removeAttribute(name);
-    } else {
-      element.removeAttributeNS(namespace, name);
+    function getClassList(element) {
+      return element.classList;
     }
-  }
 
-  function addEventListener(target, type, callback, options) {
-    target.addEventListener(type, callback, options);
-  }
+    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 removeEventListener(target, type, callback, options) {
-    target.removeEventListener(type, callback, options);
-  }
+    function getBoundingClientRect(element) {
+      return element.getBoundingClientRect();
+    }
 
-  function dispatchEvent(target, event) {
-    return target.dispatchEvent(event);
-  }
+    function querySelector(element, selectors) {
+      return element.querySelector(selectors);
+    }
 
-  function getClassList(element) {
-    return element.classList;
-  }
+    function querySelectorAll(element, selectors) {
+      return element.querySelectorAll(selectors);
+    }
 
-  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 getElementsByTagName(element, tagNameOrWildCard) {
+      return element.getElementsByTagName(tagNameOrWildCard);
+    }
 
-  function getBoundingClientRect(element) {
-    return element.getBoundingClientRect();
-  }
+    function getElementsByClassName(element, names) {
+      return element.getElementsByClassName(names);
+    }
 
-  function querySelector(element, selectors) {
-    return element.querySelector(selectors);
-  }
+    function getChildren(element) {
+      return element.children;
+    }
 
-  function querySelectorAll(element, selectors) {
-    return element.querySelectorAll(selectors);
-  }
+    function getChildNodes(element) {
+      return element.childNodes;
+    }
 
-  function getElementsByTagName(element, tagNameOrWildCard) {
-    return element.getElementsByTagName(tagNameOrWildCard);
-  }
+    function getFirstChild(element) {
+      return element.firstChild;
+    }
 
-  function getElementsByClassName(element, names) {
-    return element.getElementsByClassName(names);
-  }
+    function getFirstElementChild(element) {
+      return element.firstElementChild;
+    }
 
-  function getChildren(element) {
-    return element.children;
-  }
+    function getLastChild(element) {
+      return element.lastChild;
+    }
 
-  function getChildNodes(element) {
-    return element.childNodes;
-  }
+    function getLastElementChild(element) {
+      return element.lastElementChild;
+    }
 
-  function getFirstChild(element) {
-    return element.firstChild;
-  }
+    function isConnected(node) {
+      return node.isConnected;
+    }
 
-  function getFirstElementChild(element) {
-    return element.firstElementChild;
-  }
+    function assertInstanceOfHTMLElement(elm, msg) {
+      assertInvariant(elm instanceof HTMLElement, msg);
+    }
 
-  function getLastChild(element) {
-    return element.lastChild;
-  }
+    var HTMLElementExported = HTMLElementConstructor;
+    var renderer = {
+      HTMLElementExported: HTMLElementExported,
+      insert: insert,
+      remove: remove,
+      cloneNode: cloneNode,
+      createFragment: createFragment,
+      createElement: createElement,
+      createText: createText,
+      createComment: createComment,
+      nextSibling: nextSibling,
+      attachShadow: attachShadow,
+      getProperty: getProperty,
+      setProperty: setProperty,
+      setText: setText,
+      getAttribute: getAttribute,
+      setAttribute: setAttribute,
+      removeAttribute: removeAttribute,
+      addEventListener: addEventListener,
+      removeEventListener: removeEventListener,
+      dispatchEvent: dispatchEvent,
+      getClassList: getClassList,
+      setCSSStyleProperty: setCSSStyleProperty,
+      getBoundingClientRect: getBoundingClientRect,
+      querySelector: querySelector,
+      querySelectorAll: querySelectorAll,
+      getElementsByTagName: getElementsByTagName,
+      getElementsByClassName: getElementsByClassName,
+      getChildren: getChildren,
+      getChildNodes: getChildNodes,
+      getFirstChild: getFirstChild,
+      getFirstElementChild: getFirstElementChild,
+      getLastChild: getLastChild,
+      getLastElementChild: getLastElementChild,
+      isConnected: isConnected,
+      assertInstanceOfHTMLElement: assertInstanceOfHTMLElement,
+      defineCustomElement: defineCustomElement,
+      getCustomElement: getCustomElement
+    }; // Meant to inherit any properties passed via the base renderer as the argument to the factory.
 
-  function getLastElementChild(element) {
-    return element.lastElementChild;
+    Object.setPrototypeOf(renderer, baseRenderer);
+    return renderer;
   }
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
 
-  function isConnected(node) {
-    return node.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.
+   */
 
-  function assertInstanceOfHTMLElement(elm, msg) {
-    assert.invariant(elm instanceof HTMLElement, msg);
-  }
 
-  var HTMLElementExported = HTMLElementConstructor;
-  var renderer = {
-    ssr: ssr,
-    isNativeShadowDefined: isNativeShadowDefined,
-    isSyntheticShadowDefined: isSyntheticShadowDefined,
-    HTMLElementExported: HTMLElementExported,
-    isHydrating: isHydrating,
-    insert: insert,
-    remove: remove,
-    cloneNode: cloneNode,
-    createFragment: createFragment,
-    createElement: createElement$1,
-    createText: createText,
-    createComment: createComment,
-    nextSibling: nextSibling,
-    attachShadow: attachShadow,
-    getProperty: getProperty,
-    setProperty: setProperty,
-    setText: setText,
-    getAttribute: getAttribute,
-    setAttribute: setAttribute,
-    removeAttribute: removeAttribute,
-    addEventListener: addEventListener,
-    removeEventListener: removeEventListener,
-    dispatchEvent: dispatchEvent,
-    getClassList: getClassList,
-    setCSSStyleProperty: setCSSStyleProperty,
-    getBoundingClientRect: getBoundingClientRect,
-    querySelector: querySelector,
-    querySelectorAll: querySelectorAll,
-    getElementsByTagName: getElementsByTagName,
-    getElementsByClassName: getElementsByClassName,
-    getChildren: getChildren,
-    getChildNodes: getChildNodes,
-    getFirstChild: getFirstChild,
-    getFirstElementChild: getFirstElementChild,
-    getLastChild: getLastChild,
-    getLastElementChild: getLastElementChild,
-    isConnected: isConnected,
+  var 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: insertStylesheet,
-    assertInstanceOfHTMLElement: assertInstanceOfHTMLElement,
-    defineCustomElement: defineCustomElement,
-    getCustomElement: getCustomElement
-  };
+    isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
+    isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN)
+  });
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -8902,13 +8929,8 @@ var LWC = (function (exports) {
     }
 
     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);
       var vm = createVMWithProps(element, Ctor, props);
-      hydrateRoot(vm); // set it back since now we finished hydration.
-
-      setIsHydrating(false);
+      hydrateRoot(vm);
     } catch (e) {
       // Fallback: In case there's an error while hydrating, let's log the error, and replace the element content
       //           with the client generated DOM.
@@ -8919,11 +8941,7 @@ var LWC = (function (exports) {
       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);
     }
   }
   /*
@@ -9018,7 +9036,6 @@ var LWC = (function (exports) {
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  // TODO [#2472]: Remove this workaround when appropriate.
   // eslint-disable-next-line @lwc/lwc-internal/no-global-node
 
 
@@ -9038,39 +9055,41 @@ var LWC = (function (exports) {
     }
 
     return node; // for convenience
-  } // Monkey patching Node methods to be able to detect the insertions and removal of root elements
-  // created via createElement.
-
+  }
 
-  var _Node$1$prototype = _Node$1.prototype,
-      _appendChild2 = _Node$1$prototype.appendChild,
-      _insertBefore2 = _Node$1$prototype.insertBefore,
-      _removeChild2 = _Node$1$prototype.removeChild,
-      _replaceChild2 = _Node$1$prototype.replaceChild;
-  assign(_Node$1.prototype, {
-    appendChild: function appendChild(newChild) {
-      var appendedNode = _appendChild2.call(this, newChild);
+  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.
+    var _Node$1$prototype = _Node$1.prototype,
+        _appendChild = _Node$1$prototype.appendChild,
+        _insertBefore = _Node$1$prototype.insertBefore,
+        _removeChild = _Node$1$prototype.removeChild,
+        _replaceChild = _Node$1$prototype.replaceChild;
+    assign(_Node$1.prototype, {
+      appendChild: function appendChild(newChild) {
+        var appendedNode = _appendChild.call(this, newChild);
 
-      return callNodeSlot(appendedNode, ConnectingSlot);
-    },
-    insertBefore: function insertBefore(newChild, referenceNode) {
-      var insertedNode = _insertBefore2.call(this, newChild, referenceNode);
+        return callNodeSlot(appendedNode, ConnectingSlot);
+      },
+      insertBefore: function insertBefore(newChild, referenceNode) {
+        var insertedNode = _insertBefore.call(this, newChild, referenceNode);
 
-      return callNodeSlot(insertedNode, ConnectingSlot);
-    },
-    removeChild: function removeChild(oldChild) {
-      var removedNode = _removeChild2.call(this, oldChild);
+        return callNodeSlot(insertedNode, ConnectingSlot);
+      },
+      removeChild: function removeChild(oldChild) {
+        var removedNode = _removeChild.call(this, oldChild);
 
-      return callNodeSlot(removedNode, DisconnectingSlot);
-    },
-    replaceChild: function replaceChild(newChild, oldChild) {
-      var replacedNode = _replaceChild2.call(this, newChild, oldChild);
+        return callNodeSlot(removedNode, DisconnectingSlot);
+      },
+      replaceChild: function replaceChild(newChild, oldChild) {
+        var replacedNode = _replaceChild.call(this, newChild, oldChild);
 
-      callNodeSlot(replacedNode, DisconnectingSlot);
-      callNodeSlot(newChild, ConnectingSlot);
-      return replacedNode;
-    }
-  });
+        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
@@ -9083,6 +9102,7 @@ var LWC = (function (exports) {
    * ```
    */
 
+
   function createElement(sel, options) {
     if (!isObject(options) || isNull(options)) {
       throw new TypeError("\"createElement\" function expects an object as second parameter but received \"".concat(toString$1(options), "\"."));
@@ -9110,8 +9130,12 @@ var LWC = (function (exports) {
         mode: options.mode !== 'closed' ? 'open' : 'closed',
         owner: null
       });
-      ConnectingSlot.set(elm, connectRootElement);
-      DisconnectingSlot.set(elm, disconnectRootElement);
+
+      if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        ConnectingSlot.set(elm, connectRootElement);
+        DisconnectingSlot.set(elm, disconnectRootElement);
+      }
+
       wasComponentUpgraded = true;
     });
 
@@ -9158,7 +9182,7 @@ var LWC = (function (exports) {
     // 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]);
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -9202,7 +9226,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.22.0 */
+  /* version: 2.23.2 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -9224,6 +9248,7 @@ var LWC = (function (exports) {
   exports.registerDecorators = registerDecorators;
   exports.registerTemplate = registerTemplate;
   exports.renderer = renderer;
+  exports.rendererFactory = rendererFactory;
   exports.sanitizeAttribute = sanitizeAttribute;
   exports.setFeatureFlag = setFeatureFlag;
   exports.setFeatureFlagForTest = setFeatureFlagForTest;