lwc 2.21.0 → 2.23.0

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

@@ -346,7 +346,7 @@ var LWC = (function (exports) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.21.0 */
+  /** version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -734,20 +734,24 @@ var LWC = (function (exports) {
 
     return ReactiveObserver;
   }();
-  /*
-   * 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 componentValueMutated(vm, key) {
-    valueMutated(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+      valueMutated(vm.component, key);
+    }
   }
 
   function componentValueObserved(vm, key) {
-    valueObserved(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+      valueObserved(vm.component, key);
+    }
+  }
+
+  function createReactiveObserver(callback) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return new ReactiveObserver(callback);
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1012,6 +1016,15 @@ var LWC = (function (exports) {
       HTMLElementOriginalDescriptors[propName] = descriptor;
     }
   });
+
+  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.
    */
@@ -1672,8 +1685,28 @@ var LWC = (function (exports) {
    */
 
   function unwrap(value) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
     return reactiveMembrane.unwrapProxy(value);
   }
+
+  function getReadOnlyProxy(value) {
+    // We must return a frozen wrapper around the value, so that child components cannot mutate properties passed to
+    // them from their parents. This applies to both the client and server.
+    return reactiveMembrane.getReadOnlyProxy(value);
+  }
+
+  function getReactiveProxy(value) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return reactiveMembrane.getProxy(value);
+  } // Making the component instance a live value when using Locker to support expandos.
+
+
+  function markLockerLiveObject(obj) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+      obj[lockerLivePropertyKey] = undefined;
+    }
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1722,11 +1755,7 @@ var LWC = (function (exports) {
       set: function set(newValue) {
         var vm = getAssociatedVM(this);
 
-        if (newValue !== vm.cmpProps[propName]) {
-          vm.cmpProps[propName] = newValue;
-          componentValueMutated(vm, propName);
-        }
-
+        updateComponentValue(vm, propName, newValue);
         return _set.call(vm.elm, newValue);
       }
     };
@@ -1764,10 +1793,9 @@ var LWC = (function (exports) {
       vm.callHook = _callHook;
       vm.setHook = _setHook;
       vm.getHook = _getHook;
-    } // Making the component instance a live value when using Locker to support expandos.
-
+    }
 
-    this[lockerLivePropertyKey] = undefined; // Linking elm, shadow root and component with the VM.
+    markLockerLiveObject(this); // Linking elm, shadow root and component with the VM.
 
     associateVM(component, vm);
     associateVM(elm, vm);
@@ -2015,47 +2043,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);
-        }
-      },
-      enumerable: true,
-      configurable: true
-    };
-  }
-  /*
-   * 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 api$1() {
-
-    throw new Error();
-  }
-
-  function createPublicPropertyDescriptor(key) {
-    return {
-      get: function get() {
-        var vm = getAssociatedVM(this);
-
-        if (isBeingConstructed(vm)) {
-
-          return;
-        }
-
-        componentValueObserved(vm, key);
-        return vm.cmpProps[key];
-      },
-      set: function set(newValue) {
-        var vm = getAssociatedVM(this);
-
-        vm.cmpProps[key] = newValue;
-        componentValueMutated(vm, key);
+        updateComponentValue(vm, key, newValue);
       },
       enumerable: true,
       configurable: true
@@ -2119,6 +2107,47 @@ var LWC = (function (exports) {
     return AccessorReactiveObserver;
   }(ReactiveObserver);
 
+  function createAccessorReactiveObserver(vm, set) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return new AccessorReactiveObserver(vm, set);
+  }
+  /*
+   * 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 api$1() {
+
+    throw new Error();
+  }
+
+  function createPublicPropertyDescriptor(key) {
+    return {
+      get: function get() {
+        var vm = getAssociatedVM(this);
+
+        if (isBeingConstructed(vm)) {
+
+          return;
+        }
+
+        componentValueObserved(vm, key);
+        return vm.cmpProps[key];
+      },
+      set: function set(newValue) {
+        var vm = getAssociatedVM(this);
+
+        vm.cmpProps[key] = newValue;
+        componentValueMutated(vm, key);
+      },
+      enumerable: true,
+      configurable: true
+    };
+  }
+
   function createPublicAccessorDescriptor(key, descriptor) {
     var _get3 = descriptor.get,
         _set2 = descriptor.set,
@@ -2145,7 +2174,7 @@ var LWC = (function (exports) {
             var ro = vm.oar[key];
 
             if (isUndefined$1(ro)) {
-              ro = vm.oar[key] = new AccessorReactiveObserver(vm, _set2);
+              ro = vm.oar[key] = createAccessorReactiveObserver(vm, _set2);
             } // every time we invoke this setter from outside (through this wrapper setter)
             // we should reset the value and then debounce just in case there is a pending
             // invocation the next tick that is not longer relevant since the value is changing
@@ -2175,7 +2204,7 @@ var LWC = (function (exports) {
 
   function track(target) {
     if (arguments.length === 1) {
-      return reactiveMembrane.getProxy(target);
+      return getReactiveProxy(target);
     }
 
     throw new Error();
@@ -2191,12 +2220,8 @@ var LWC = (function (exports) {
       set: function set(newValue) {
         var vm = getAssociatedVM(this);
 
-        var reactiveOrAnyValue = reactiveMembrane.getProxy(newValue);
-
-        if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-          vm.cmpFields[key] = reactiveOrAnyValue;
-          componentValueMutated(vm, key);
-        }
+        var reactiveOrAnyValue = getReactiveProxy(newValue);
+        updateComponentValue(vm, key, reactiveOrAnyValue);
       },
       enumerable: true,
       configurable: true
@@ -2237,10 +2262,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
@@ -2499,7 +2521,7 @@ var LWC = (function (exports) {
       fn = cachedSetterByKey[key] = function (newValue) {
         var vm = getAssociatedVM(this);
         var setHook = vm.setHook;
-        newValue = reactiveMembrane.getReadOnlyProxy(newValue);
+        newValue = getReadOnlyProxy(newValue);
         setHook(vm.component, key, newValue);
       };
     }
@@ -3106,9 +3128,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 */
@@ -3118,7 +3138,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.
@@ -3499,7 +3519,7 @@ var LWC = (function (exports) {
     }
   }
 
-  function patch(n1, n2, renderer) {
+  function patch(n1, n2, parent, renderer) {
     var _a, _b;
 
     if (n1 === n2) {
@@ -3536,7 +3556,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;
     }
   }
@@ -3621,10 +3641,10 @@ var LWC = (function (exports) {
         svg = vnode.data.svg;
     var createElement = renderer.createElement;
     var namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    var elm = createElement(sel, namespace);
+    var elm = vnode.elm = createElement(sel, namespace);
     linkNodeToShadow(elm, owner, renderer);
-    fallbackElmHook(elm, vnode, renderer);
-    vnode.elm = elm;
+    applyStyleScoping(elm, owner, renderer);
+    applyDomManual(elm, vnode);
     patchElementPropsAndAttrs$1(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     mountVNodes(vnode.children, elm, renderer, null);
@@ -3641,7 +3661,7 @@ var LWC = (function (exports) {
     var cloneNode = renderer.cloneNode,
         isSyntheticShadowDefined = renderer.isSyntheticShadowDefined;
     var elm = vnode.elm = cloneNode(vnode.fragment, true);
-    linkNodeToShadow(elm, owner, renderer); // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+    linkNodeToShadow(elm, owner, renderer);
 
     var renderMode = owner.renderMode,
         shadowMode = owner.shadowMode;
@@ -3675,9 +3695,10 @@ var LWC = (function (exports) {
       // the custom element from the registry is expecting an upgrade callback
       vm = createViewModelHook(elm, vnode, renderer);
     });
-    linkNodeToShadow(elm, owner, renderer);
     vnode.elm = elm;
     vnode.vm = vm;
+    linkNodeToShadow(elm, owner, renderer);
+    applyStyleScoping(elm, owner, renderer);
 
     if (vm) {
       allocateChildren(vnode, vm);
@@ -3700,25 +3721,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);
+      }
     }
   }
 
@@ -3794,26 +3824,6 @@ var LWC = (function (exports) {
     return vnode != null;
   }
 
-  function observeElementChildNodes(elm) {
-    elm.$domManual$ = true;
-  }
-
-  function setElementShadowToken(elm, token) {
-    elm.$shadowToken$ = token;
-  } // Set the scope token class for *.scoped.css styles
-
-
-  function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-    var token = getScopeTokenClass(owner);
-
-    if (!isNull(token)) {
-      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(token);
-    }
-  }
-
   function linkNodeToShadow(elm, owner, renderer) {
     var renderRoot = owner.renderRoot,
         renderMode = owner.renderMode,
@@ -3864,28 +3874,39 @@ var LWC = (function (exports) {
     patchProps(oldVnode, vnode, renderer);
   }
 
-  function fallbackElmHook(elm, vnode, renderer) {
-    var owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
+  function applyStyleScoping(elm, owner, renderer) {
+    // Set the class name for `*.scoped.css` style scoping.
+    var scopeToken = getScopeTokenClass(owner);
+
+    if (!isNull(scopeToken)) {
+      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);
+    } // Set property element for synthetic shadow DOM style scoping.
+
+
+    var syntheticToken = owner.context.stylesheetToken;
 
     if (owner.shadowMode === 1
     /* ShadowMode.Synthetic */
-    ) {
-      var context = vnode.data.context;
-      var stylesheetToken = owner.context.stylesheetToken;
+    && !isUndefined$1(syntheticToken)) {
+      elm.$shadowToken$ = syntheticToken;
+    }
+  }
 
-      if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
-      /* LwcDomMode.Manual */
-      ) {
-        // this element will now accept any manual content inserted into it
-        observeElementChildNodes(elm);
-      }
+  function applyDomManual(elm, vnode) {
+    var _a;
 
-      if (!isUndefined$1(stylesheetToken)) {
-        // when running in synthetic shadow mode, we need to set the shadowToken value
-        // into each element from the template, so they can be styled accordingly.
-        setElementShadowToken(elm, stylesheetToken);
-      }
+    var owner = vnode.owner,
+        context = vnode.data.context;
+
+    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;
     }
   }
 
@@ -3932,19 +3953,6 @@ var LWC = (function (exports) {
         mode = vnode.mode,
         ctor = vnode.ctor,
         owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner, renderer);
-
-    if (owner.shadowMode === 1
-    /* ShadowMode.Synthetic */
-    ) {
-      var stylesheetToken = owner.context.stylesheetToken; // when running in synthetic shadow mode, we need to set the shadowToken value
-      // into each element from the template, so they can be styled accordingly.
-
-      if (!isUndefined$1(stylesheetToken)) {
-        setElementShadowToken(elm, stylesheetToken);
-      }
-    }
-
     vm = createVM(elm, ctor, renderer, {
       mode: mode,
       owner: owner,
@@ -4064,22 +4072,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];
@@ -4102,7 +4110,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`
@@ -4172,7 +4180,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
@@ -4473,19 +4481,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;
 
@@ -4498,22 +4498,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
@@ -4974,7 +4959,7 @@ var LWC = (function (exports) {
   }
 
   function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(function () {
+    return createReactiveObserver(function () {
       var isDirty = vm.isDirty;
 
       if (isFalse(isDirty)) {
@@ -5353,13 +5338,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) {
@@ -5582,9 +5561,7 @@ var LWC = (function (exports) {
   }
 
   function scheduleRehydration(vm) {
-    var ssr = vm.renderer.ssr;
-
-    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
+    if (isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -5686,13 +5663,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);
     };
   }
 
@@ -5709,7 +5681,7 @@ var LWC = (function (exports) {
   function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
     var hasPendingConfig = false; // creating the reactive observer for reactive params when needed
 
-    var ro = new ReactiveObserver(function () {
+    var ro = createReactiveObserver(function () {
       if (hasPendingConfig === false) {
         hasPendingConfig = true; // collect new config in the micro-task
 
@@ -6000,7 +5972,7 @@ var LWC = (function (exports) {
 
   function readonly(obj) {
 
-    return reactiveMembrane.getReadOnlyProxy(obj);
+    return getReadOnlyProxy(obj);
   }
   /*
    * Copyright (c) 2022, salesforce.com, inc.
@@ -6482,7 +6454,7 @@ var LWC = (function (exports) {
 
     return ctor;
   }
-  /* version: 2.21.0 */
+  /* version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6641,6 +6613,85 @@ var LWC = (function (exports) {
    */
 
 
+  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;
+
+        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
+
+
+      var doc = document.implementation.createHTMLDocument('');
+      doc.body.innerHTML = html;
+      var content = doc.body;
+
+      if (!isUndefined$1(wrapperTags)) {
+        for (var _i32 = 0; _i32 < wrapperTags.length; _i32++) {
+          content = content.firstChild;
+        }
+      }
+
+      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
+   */
+
+
   var getCustomElement;
   var defineCustomElement;
   var HTMLElementConstructor;
@@ -6722,18 +6773,6 @@ var LWC = (function (exports) {
     HTMLElementConstructor.prototype = HTMLElement.prototype;
   }
 
-  var hydrating = false;
-
-  function setIsHydrating(value) {
-    hydrating = value;
-  }
-
-  var ssr = false;
-
-  function isHydrating() {
-    return hydrating;
-  }
-
   var isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
   var isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
 
@@ -6741,10 +6780,6 @@ var LWC = (function (exports) {
     return node.cloneNode(deep);
   }
 
-  function createFragment(html) {
-    return document.createRange().createContextualFragment(html).firstChild;
-  }
-
   function createElement$1(tagName, namespace) {
     return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
   }
@@ -6770,15 +6805,11 @@ var LWC = (function (exports) {
   }
 
   function attachShadow(element, options) {
-    // `hydrating` will be true in two cases:
+    // `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 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) {
+    //      root component with customElement.define('c-app', Ctor)
+    if (!isNull(element.shadowRoot)) {
       return element.shadowRoot;
     }
 
@@ -6890,11 +6921,9 @@ var LWC = (function (exports) {
 
   var HTMLElementExported = HTMLElementConstructor;
   var renderer = {
-    ssr: ssr,
     isNativeShadowDefined: isNativeShadowDefined,
     isSyntheticShadowDefined: isSyntheticShadowDefined,
     HTMLElementExported: HTMLElementExported,
-    isHydrating: isHydrating,
     insert: insert,
     remove: remove,
     cloneNode: cloneNode,
@@ -6963,8 +6992,8 @@ var LWC = (function (exports) {
       hydrated: true
     });
 
-    for (var _i32 = 0, _Object$entries2 = Object.entries(props); _i32 < _Object$entries2.length; _i32++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i32], 2),
+    for (var _i33 = 0, _Object$entries2 = Object.entries(props); _i33 < _Object$entries2.length; _i33++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i33], 2),
           key = _Object$entries2$_i[0],
           value = _Object$entries2$_i[1];
 
@@ -6996,13 +7025,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.
@@ -7013,11 +7037,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);
     }
   }
   /*
@@ -7289,7 +7309,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.21.0 */
+  /* version: 2.23.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;