lwc 2.31.6 → 2.31.8

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

@@ -346,9 +346,9 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  var LWC_VERSION = "2.31.6";
+  var LWC_VERSION = "2.31.8";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.31.6 */
+  /** version: 2.31.8 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -429,7 +429,7 @@ var LWC = (function (exports) {
       patch$1(propName);
     }
   }
-  /** version: 2.31.6 */
+  /** version: 2.31.8 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -511,7 +511,7 @@ var LWC = (function (exports) {
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.31.6 */
+  /** version: 2.31.8 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -3187,6 +3187,123 @@ var LWC = (function (exports) {
   freeze(BaseBridgeElement);
   seal(BaseBridgeElement.prototype);
 
+  /*
+   * Copyright (c) 2023, 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 supportsWeakRefs = typeof WeakRef === 'function' && typeof FinalizationRegistry === 'function';
+  // In browsers that doesn't support WeakRefs, the values will still leak, but at least the keys won't
+  var LegacyWeakMultiMap = /*#__PURE__*/function () {
+    function LegacyWeakMultiMap() {
+      _classCallCheck(this, LegacyWeakMultiMap);
+      this._map = new WeakMap();
+    }
+    _createClass(LegacyWeakMultiMap, [{
+      key: "_getValues",
+      value: function _getValues(key) {
+        var values = this._map.get(key);
+        if (isUndefined$1(values)) {
+          values = new Set();
+          this._map.set(key, values);
+        }
+        return values;
+      }
+    }, {
+      key: "get",
+      value: function get(key) {
+        return this._getValues(key);
+      }
+    }, {
+      key: "add",
+      value: function add(key, vm) {
+        var set = this._getValues(key);
+        set.add(vm);
+      }
+    }, {
+      key: "delete",
+      value: function _delete(key) {
+        this._map.delete(key);
+      }
+    }]);
+    return LegacyWeakMultiMap;
+  }(); // This implementation relies on the WeakRef/FinalizationRegistry proposal.
+  // For some background, see: https://github.com/tc39/proposal-weakrefs
+  var ModernWeakMultiMap = /*#__PURE__*/function () {
+    function ModernWeakMultiMap() {
+      _classCallCheck(this, ModernWeakMultiMap);
+      this._map = new WeakMap();
+      this._registry = new FinalizationRegistry(function (weakRefs) {
+        // This should be considered an optional cleanup method to remove GC'ed values from their respective arrays.
+        // JS VMs are not obligated to call FinalizationRegistry callbacks.
+        // Work backwards, removing stale VMs
+        for (var _i11 = weakRefs.length - 1; _i11 >= 0; _i11--) {
+          var vm = weakRefs[_i11].deref();
+          if (isUndefined$1(vm)) {
+            ArraySplice.call(weakRefs, _i11, 1); // remove
+          }
+        }
+      });
+    }
+    _createClass(ModernWeakMultiMap, [{
+      key: "_getWeakRefs",
+      value: function _getWeakRefs(key) {
+        var weakRefs = this._map.get(key);
+        if (isUndefined$1(weakRefs)) {
+          weakRefs = [];
+          this._map.set(key, weakRefs);
+        }
+        return weakRefs;
+      }
+    }, {
+      key: "get",
+      value: function get(key) {
+        var weakRefs = this._getWeakRefs(key);
+        var result = new Set();
+        var _iterator4 = _createForOfIteratorHelper(weakRefs),
+          _step4;
+        try {
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var weakRef = _step4.value;
+            var vm = weakRef.deref();
+            if (!isUndefined$1(vm)) {
+              result.add(vm);
+            }
+          }
+        } catch (err) {
+          _iterator4.e(err);
+        } finally {
+          _iterator4.f();
+        }
+        return result;
+      }
+    }, {
+      key: "add",
+      value: function add(key, value) {
+        var weakRefs = this._getWeakRefs(key);
+        // We could check for duplicate values here, but it doesn't seem worth it.
+        // We transform the output into a Set anyway
+        ArrayPush$1.call(weakRefs, new WeakRef(value));
+        // It's important here not to leak the second argument, which is the "held value." The FinalizationRegistry
+        // effectively creates a strong reference between the first argument (the "target") and the held value. When
+        // the target is GC'ed, the callback is called, and then the held value is GC'ed.
+        // Putting the key here would mean the key is not GC'ed until the value is GC'ed, which defeats the purpose
+        // of the WeakMap. Whereas putting the weakRefs array here is fine, because it doesn't have a strong reference
+        // to anything. See also this example:
+        // https://gist.github.com/nolanlawson/79a3d36e8e6cc25c5048bb17c1795aea
+        this._registry.register(value, weakRefs);
+      }
+    }, {
+      key: "delete",
+      value: function _delete(key) {
+        this._map.delete(key);
+      }
+    }]);
+    return ModernWeakMultiMap;
+  }();
+  var WeakMultiMap = supportsWeakRefs ? ModernWeakMultiMap : LegacyWeakMultiMap;
+
   /*
    * Copyright (c) 2020, salesforce.com, inc.
    * All rights reserved.
@@ -3196,46 +3313,65 @@ var LWC = (function (exports) {
   var swappedTemplateMap = new WeakMap();
   var swappedComponentMap = new WeakMap();
   var swappedStyleMap = new WeakMap();
-  var activeTemplates = new WeakMap();
-  var activeComponents = new WeakMap();
-  var activeStyles = new WeakMap();
+  // The important thing here is the weak values – VMs are transient (one per component instance) and should be GC'ed,
+  // so we don't want to create strong references to them.
+  // The weak keys are kind of useless, because Templates, LightningElementConstructors, and StylesheetFactories are
+  // never GC'ed. But maybe they will be someday, so we may as well use weak keys too.
+  var activeTemplates = new WeakMultiMap();
+  var activeComponents = new WeakMultiMap();
+  var activeStyles = new WeakMultiMap();
   function rehydrateHotTemplate(tpl) {
     var list = activeTemplates.get(tpl);
-    if (!isUndefined$1(list)) {
-      list.forEach(function (vm) {
+    var _iterator5 = _createForOfIteratorHelper(list),
+      _step5;
+    try {
+      for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+        var vm = _step5.value;
         if (isFalse(vm.isDirty)) {
           // forcing the vm to rehydrate in the micro-task:
           markComponentAsDirty(vm);
           scheduleRehydration(vm);
         }
-      });
-      // resetting the Set to release the memory of those vm references
-      // since they are not longer related to this template, instead
+      }
+      // Resetting the Set since these VMs are no longer related to this template, instead
       // they will get re-associated once these instances are rehydrated.
-      list.clear();
+    } catch (err) {
+      _iterator5.e(err);
+    } finally {
+      _iterator5.f();
     }
+    activeTemplates.delete(tpl);
     return true;
   }
   function rehydrateHotStyle(style) {
     var list = activeStyles.get(style);
-    if (!isUndefined$1(list)) {
-      list.forEach(function (vm) {
+    var _iterator6 = _createForOfIteratorHelper(list),
+      _step6;
+    try {
+      for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+        var vm = _step6.value;
         // if a style definition is swapped, we must reset
         // vm's template content in the next micro-task:
         forceRehydration(vm);
-      });
-      // resetting the Set to release the memory of those vm references
-      // since they are not longer related to this style, instead
+      }
+      // Resetting the Set since these VMs are no longer related to this style, instead
       // they will get re-associated once these instances are rehydrated.
-      list.clear();
+    } catch (err) {
+      _iterator6.e(err);
+    } finally {
+      _iterator6.f();
     }
+    activeStyles.delete(style);
     return true;
   }
   function rehydrateHotComponent(Ctor) {
     var list = activeComponents.get(Ctor);
     var canRefreshAllInstances = true;
-    if (!isUndefined$1(list)) {
-      list.forEach(function (vm) {
+    var _iterator7 = _createForOfIteratorHelper(list),
+      _step7;
+    try {
+      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+        var vm = _step7.value;
         var owner = vm.owner;
         if (!isNull(owner)) {
           // if a component class definition is swapped, we must reset
@@ -3250,12 +3386,15 @@ var LWC = (function (exports) {
           // for example: reload the entire page.
           canRefreshAllInstances = false;
         }
-      });
-      // resetting the Set to release the memory of those vm references
-      // since they are not longer related to this constructor, instead
+      }
+      // resetting the Set since these VMs are no longer related to this constructor, instead
       // they will get re-associated once these instances are rehydrated.
-      list.clear();
+    } catch (err) {
+      _iterator7.e(err);
+    } finally {
+      _iterator7.f();
     }
+    activeComponents.delete(Ctor);
     return canRefreshAllInstances;
   }
   function getTemplateOrSwappedTemplate(tpl) {
@@ -3301,75 +3440,36 @@ var LWC = (function (exports) {
     }
     // tracking active component
     var Ctor = vm.def.ctor;
-    var componentVMs = activeComponents.get(Ctor);
-    if (isUndefined$1(componentVMs)) {
-      componentVMs = new Set();
-      activeComponents.set(Ctor, componentVMs);
-    }
     // this will allow us to keep track of the hot components
-    componentVMs.add(vm);
+    activeComponents.add(Ctor, vm);
     // tracking active template
     var tpl = vm.cmpTemplate;
     if (tpl) {
-      var templateVMs = activeTemplates.get(tpl);
-      if (isUndefined$1(templateVMs)) {
-        templateVMs = new Set();
-        activeTemplates.set(tpl, templateVMs);
-      }
       // this will allow us to keep track of the templates that are
       // being used by a hot component
-      templateVMs.add(vm);
+      activeTemplates.add(tpl, vm);
       // tracking active styles associated to template
       var stylesheets = tpl.stylesheets;
       if (!isUndefined$1(stylesheets)) {
-        flattenStylesheets(stylesheets).forEach(function (stylesheet) {
-          // this is necessary because we don't hold the list of styles
-          // in the vm, we only hold the selected (already swapped template)
-          // but the styles attached to the template might not be the actual
-          // active ones, but the swapped versions of those.
-          stylesheet = getStyleOrSwappedStyle(stylesheet);
-          var stylesheetVMs = activeStyles.get(stylesheet);
-          if (isUndefined$1(stylesheetVMs)) {
-            stylesheetVMs = new Set();
-            activeStyles.set(stylesheet, stylesheetVMs);
-          }
-          // this will allow us to keep track of the stylesheet that are
-          // being used by a hot component
-          stylesheetVMs.add(vm);
-        });
-      }
-    }
-  }
-  function removeActiveVM(vm) {
-    if (process.env.NODE_ENV === 'production') {
-      // this method should never leak to prod
-      throw new ReferenceError();
-    }
-    // tracking inactive component
-    var Ctor = vm.def.ctor;
-    var list = activeComponents.get(Ctor);
-    if (!isUndefined$1(list)) {
-      // deleting the vm from the set to avoid leaking memory
-      list.delete(vm);
-    }
-    // removing inactive template
-    var tpl = vm.cmpTemplate;
-    if (tpl) {
-      list = activeTemplates.get(tpl);
-      if (!isUndefined$1(list)) {
-        // deleting the vm from the set to avoid leaking memory
-        list.delete(vm);
-      }
-      // removing active styles associated to template
-      var styles = tpl.stylesheets;
-      if (!isUndefined$1(styles)) {
-        flattenStylesheets(styles).forEach(function (style) {
-          list = activeStyles.get(style);
-          if (!isUndefined$1(list)) {
-            // deleting the vm from the set to avoid leaking memory
-            list.delete(vm);
+        var _iterator8 = _createForOfIteratorHelper(flattenStylesheets(stylesheets)),
+          _step8;
+        try {
+          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+            var stylesheet = _step8.value;
+            // this is necessary because we don't hold the list of styles
+            // in the vm, we only hold the selected (already swapped template)
+            // but the styles attached to the template might not be the actual
+            // active ones, but the swapped versions of those.
+            var swappedStylesheet = getStyleOrSwappedStyle(stylesheet);
+            // this will allow us to keep track of the stylesheet that are
+            // being used by a hot component
+            activeStyles.add(swappedStylesheet, vm);
           }
-        });
+        } catch (err) {
+          _iterator8.e(err);
+        } finally {
+          _iterator8.f();
+        }
       }
     }
   }
@@ -3686,8 +3786,8 @@ var LWC = (function (exports) {
   function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     var content = [];
     var root;
-    for (var _i11 = 0; _i11 < stylesheets.length; _i11++) {
-      var stylesheet = stylesheets[_i11];
+    for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
+      var stylesheet = stylesheets[_i12];
       if (isArray$1(stylesheet)) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
       } else {
@@ -3789,8 +3889,8 @@ var LWC = (function (exports) {
       shadowMode = vm.shadowMode,
       insertStylesheet = vm.renderer.insertStylesheet;
     if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-      for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
-        insertStylesheet(stylesheets[_i12]);
+      for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
+        insertStylesheet(stylesheets[_i13]);
       }
     } else if (vm.hydrated) {
       // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
@@ -3803,8 +3903,8 @@ var LWC = (function (exports) {
       var root = getNearestNativeShadowComponent(vm);
       // null root means a global style
       var target = isNull(root) ? undefined : root.shadowRoot;
-      for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
-        insertStylesheet(stylesheets[_i13], target);
+      for (var _i14 = 0; _i14 < stylesheets.length; _i14++) {
+        insertStylesheet(stylesheets[_i14], target);
       }
     }
     return null;
@@ -4118,8 +4218,8 @@ var LWC = (function (exports) {
       return;
     }
     var setCSSStyleProperty = renderer.setCSSStyleProperty;
-    for (var _i14 = 0; _i14 < styleDecls.length; _i14++) {
-      var _styleDecls$_i = _slicedToArray(styleDecls[_i14], 3),
+    for (var _i15 = 0; _i15 < styleDecls.length; _i15++) {
+      var _styleDecls$_i = _slicedToArray(styleDecls[_i15], 3),
         prop = _styleDecls$_i[0],
         value = _styleDecls$_i[1],
         important = _styleDecls$_i[2];
@@ -4587,8 +4687,8 @@ var LWC = (function (exports) {
    */
   function collectSlots(vm, children, cmpSlotsMapping) {
     var _a, _b;
-    for (var _i15 = 0, len = children.length; _i15 < len; _i15 += 1) {
-      var vnode = children[_i15];
+    for (var _i16 = 0, len = children.length; _i16 < len; _i16 += 1) {
+      var vnode = children[_i16];
       if (isNull(vnode)) {
         continue;
       }
@@ -4624,8 +4724,8 @@ var LWC = (function (exports) {
         markComponentAsDirty(vm);
         return;
       }
-      for (var _i16 = 0, len = oldKeys.length; _i16 < len; _i16 += 1) {
-        var key = oldKeys[_i16];
+      for (var _i17 = 0, len = oldKeys.length; _i17 < len; _i17 += 1) {
+        var key = oldKeys[_i17];
         if (isUndefined$1(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
           markComponentAsDirty(vm);
           return;
@@ -4748,11 +4848,11 @@ var LWC = (function (exports) {
       if (oldStartIdx > oldEndIdx) {
         // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
         // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-        var _i17 = newEndIdx;
+        var _i18 = newEndIdx;
         var n;
         do {
-          n = newCh[++_i17];
-        } while (!isVNode(n) && _i17 < newChEnd);
+          n = newCh[++_i18];
+        } while (!isVNode(n) && _i18 < newChEnd);
         before = isVNode(n) ? n.elm : null;
         mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
       } else {
@@ -4777,9 +4877,9 @@ var LWC = (function (exports) {
     // if the old list is not empty, the new list MUST have the same
     // amount of nodes, that's why we call this static children
     var anchor = null;
-    for (var _i18 = c2Length - 1; _i18 >= 0; _i18 -= 1) {
-      var n1 = c1[_i18];
-      var n2 = c2[_i18];
+    for (var _i19 = c2Length - 1; _i19 >= 0; _i19 -= 1) {
+      var n1 = c1[_i19];
+      var n2 = c2[_i19];
       if (n2 !== n1) {
         if (isVNode(n1)) {
           if (isVNode(n2)) {
@@ -4904,8 +5004,8 @@ var LWC = (function (exports) {
     if (!isUndefined$1(slotset) && !isUndefined$1(slotset.slotAssignments) && !isUndefined$1(slotset.slotAssignments[slotName]) && slotset.slotAssignments[slotName].length !== 0) {
       var newChildren = [];
       var slotAssignments = slotset.slotAssignments[slotName];
-      for (var _i19 = 0; _i19 < slotAssignments.length; _i19++) {
-        var vnode = slotAssignments[_i19];
+      for (var _i20 = 0; _i20 < slotAssignments.length; _i20++) {
+        var vnode = slotAssignments[_i20];
         if (!isNull(vnode)) {
           var assignedNodeIsScopedSlot = isVScopedSlotFragment(vnode);
           // The only sniff test for a scoped <slot> element is the presence of `slotData`
@@ -5430,23 +5530,23 @@ var LWC = (function (exports) {
         var classAttrToken = hasScopedStyles && hasStyleToken ? " class=\"".concat(stylesheetToken, "\"") : '';
         var attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
         var htmlFragment = '';
-        for (var _i20 = 0, n = keys.length; _i20 < n; _i20++) {
-          switch (keys[_i20]) {
+        for (var _i21 = 0, n = keys.length; _i21 < n; _i21++) {
+          switch (keys[_i21]) {
             case 0:
               // styleToken in existing class attr
-              htmlFragment += strings[_i20] + classToken;
+              htmlFragment += strings[_i21] + classToken;
               break;
             case 1:
               // styleToken for added class attr
-              htmlFragment += strings[_i20] + classAttrToken;
+              htmlFragment += strings[_i21] + classAttrToken;
               break;
             case 2:
               // styleToken as attr
-              htmlFragment += strings[_i20] + attrToken;
+              htmlFragment += strings[_i21] + attrToken;
               break;
             case 3:
               // ${1}${2}
-              htmlFragment += strings[_i20] + classAttrToken + attrToken;
+              htmlFragment += strings[_i21] + classAttrToken + attrToken;
               break;
           }
         }
@@ -5554,8 +5654,8 @@ var LWC = (function (exports) {
   function computeHasScopedStyles(template) {
     var stylesheets = template.stylesheets;
     if (!isUndefined$1(stylesheets)) {
-      for (var _i21 = 0; _i21 < stylesheets.length; _i21++) {
-        if (isTrue(stylesheets[_i21][KEY__SCOPED_CSS])) {
+      for (var _i22 = 0; _i22 < stylesheets.length; _i22++) {
+        if (isTrue(stylesheets[_i22][KEY__SCOPED_CSS])) {
           return true;
         }
       }
@@ -5743,8 +5843,8 @@ var LWC = (function (exports) {
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
-    for (var _i22 = 0; _i22 < hooks.length; ++_i22) {
-      var hookName = hooks[_i22];
+    for (var _i23 = 0; _i23 < hooks.length; ++_i23) {
+      var hookName = hooks[_i23];
       if (hookName in service) {
         var l = Services[hookName];
         if (isUndefined$1(l)) {
@@ -5761,8 +5861,8 @@ var LWC = (function (exports) {
     var component = vm.component,
       def = vm.def,
       context = vm.context;
-    for (var _i23 = 0, len = cbs.length; _i23 < len; ++_i23) {
-      cbs[_i23].call(undefined, component, {}, def, context);
+    for (var _i24 = 0, len = cbs.length; _i24 < len; ++_i24) {
+      cbs[_i24].call(undefined, component, {}, def, context);
     }
   }
 
@@ -5825,9 +5925,6 @@ var LWC = (function (exports) {
       runChildNodesDisconnectedCallback(vm);
       runLightChildNodesDisconnectedCallback(vm);
     }
-    if (process.env.NODE_ENV !== 'production') {
-      removeActiveVM(vm);
-    }
   }
   // this method is triggered by the diffing algo only when a vnode from the
   // old vnode.children is removed from the DOM.
@@ -6041,17 +6138,17 @@ var LWC = (function (exports) {
       return a.idx - b.idx;
     });
     rehydrateQueue = []; // reset to a new queue
-    for (var _i24 = 0, len = vms.length; _i24 < len; _i24 += 1) {
-      var vm = vms[_i24];
+    for (var _i25 = 0, len = vms.length; _i25 < len; _i25 += 1) {
+      var vm = vms[_i25];
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i24 + 1 < len) {
+        if (_i25 + 1 < len) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i24 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i25 + 1));
         }
         // we need to end the measure before throwing.
         logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
@@ -6120,8 +6217,8 @@ var LWC = (function (exports) {
     var vCustomElementCollection = vm.velements;
     // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
-    for (var _i25 = vCustomElementCollection.length - 1; _i25 >= 0; _i25 -= 1) {
-      var elm = vCustomElementCollection[_i25].elm;
+    for (var _i26 = vCustomElementCollection.length - 1; _i26 >= 0; _i26 -= 1) {
+      var elm = vCustomElementCollection[_i26].elm;
       // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
@@ -6152,8 +6249,8 @@ var LWC = (function (exports) {
    * defined on its shadow.
    */
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i26 = 0, len = vnodes.length; _i26 < len; _i26 += 1) {
-      var vnode = vnodes[_i26];
+    for (var _i27 = 0, len = vnodes.length; _i27 < len; _i27 += 1) {
+      var vnode = vnodes[_i27];
       if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
         switch (vnode.type) {
           case 2 /* VNodeType.Element */:
@@ -6174,19 +6271,30 @@ var LWC = (function (exports) {
   // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
   // children VNodes might not be representing the current state of the DOM.
   function resetComponentRoot(vm) {
-    var children = vm.children,
-      renderRoot = vm.renderRoot,
-      remove = vm.renderer.remove;
-    for (var _i27 = 0, len = children.length; _i27 < len; _i27++) {
-      var child = children[_i27];
-      if (!isNull(child) && !isUndefined$1(child.elm)) {
-        remove(child.elm, renderRoot);
-      }
-    }
+    recursivelyRemoveChildren(vm.children, vm);
     vm.children = EmptyArray;
     runChildNodesDisconnectedCallback(vm);
     vm.velements = EmptyArray;
   }
+  // Helper function to remove all children of the root node.
+  // If the set of children includes VFragment nodes, we need to remove the children of those nodes too.
+  // Since VFragments can contain other VFragments, we need to traverse the entire of tree of VFragments.
+  // If the set contains no VFragment nodes, no traversal is needed.
+  function recursivelyRemoveChildren(vnodes, vm) {
+    var renderRoot = vm.renderRoot,
+      remove = vm.renderer.remove;
+    for (var _i28 = 0, len = vnodes.length; _i28 < len; _i28 += 1) {
+      var vnode = vnodes[_i28];
+      if (!isNull(vnode)) {
+        // VFragments are special; their .elm property does not point to the root element since they have no single root.
+        if (isVFragment(vnode)) {
+          recursivelyRemoveChildren(vnode.children, vm);
+        } else if (!isUndefined$1(vnode.elm)) {
+          remove(vnode.elm, renderRoot);
+        }
+      }
+    }
+  }
   function scheduleRehydration(vm) {
     if (isTrue(vm.isScheduled)) {
       return;
@@ -6516,16 +6624,16 @@ var LWC = (function (exports) {
   }
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
-    for (var _i28 = 0, len = wiredConnecting.length; _i28 < len; _i28 += 1) {
-      wiredConnecting[_i28]();
+    for (var _i29 = 0, len = wiredConnecting.length; _i29 < len; _i29 += 1) {
+      wiredConnecting[_i29]();
     }
   }
   function disconnectWireAdapters(vm) {
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i29 = 0, len = wiredDisconnecting.length; _i29 < len; _i29 += 1) {
-        wiredDisconnecting[_i29]();
+      for (var _i30 = 0, len = wiredDisconnecting.length; _i30 < len; _i30 += 1) {
+        wiredDisconnecting[_i30]();
       }
     }, noop);
   }
@@ -6764,8 +6872,8 @@ var LWC = (function (exports) {
     var nextNode = node;
     var anchor = null;
     var renderer = owner.renderer;
-    for (var _i30 = 0; _i30 < children.length; _i30++) {
-      var childVnode = children[_i30];
+    for (var _i31 = 0; _i31 < children.length; _i31++) {
+      var childVnode = children[_i31];
       if (!isNull(childVnode)) {
         if (nextNode) {
           nextNode = hydrateNode(nextNode, childVnode, renderer);
@@ -6843,8 +6951,8 @@ var LWC = (function (exports) {
     var nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
-    for (var _i31 = 0, _Object$entries = Object.entries(attrs); _i31 < _Object$entries.length; _i31++) {
-      var _Object$entries$_i = _slicedToArray(_Object$entries[_i31], 2),
+    for (var _i32 = 0, _Object$entries = Object.entries(attrs); _i32 < _Object$entries.length; _i32++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i32], 2),
         attrName = _Object$entries$_i[0],
         attrValue = _Object$entries$_i[1];
       var owner = vnode.owner;
@@ -6945,8 +7053,8 @@ var LWC = (function (exports) {
       var parsedVnodeStyle = parseStyleText(elmStyle);
       var expectedStyle = [];
       // styleMap is used when style is set to static value.
-      for (var _i32 = 0, n = styleDecls.length; _i32 < n; _i32++) {
-        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i32], 3),
+      for (var _i33 = 0, n = styleDecls.length; _i33 < n; _i33++) {
+        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i33], 3),
           prop = _styleDecls$_i2[0],
           value = _styleDecls$_i2[1],
           important = _styleDecls$_i2[2];
@@ -7059,11 +7167,11 @@ var LWC = (function (exports) {
   function warnOnArrayMutation(stylesheets) {
     // We can't handle users calling Array.prototype.slice.call(tmpl.stylesheets), but
     // we can at least warn when they use the most common mutation methods.
-    var _iterator4 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
-      _step4;
+    var _iterator9 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
+      _step9;
     try {
       var _loop2 = function _loop2() {
-        var prop = _step4.value;
+        var prop = _step9.value;
         var originalArrayMethod = getOriginalArrayMethod(prop);
         stylesheets[prop] = function arrayMutationWarningWrapper() {
           logError("Mutating the \"stylesheets\" array on a template function " + "is deprecated and may be removed in a future version of LWC.");
@@ -7071,13 +7179,13 @@ var LWC = (function (exports) {
           return originalArrayMethod.apply(this, arguments);
         };
       };
-      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+      for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
         _loop2();
       }
     } catch (err) {
-      _iterator4.e(err);
+      _iterator9.e(err);
     } finally {
-      _iterator4.f();
+      _iterator9.f();
     }
   }
   // TODO [#2782]: eventually freezeTemplate() will _actually_ freeze the tmpl object. Today it
@@ -7087,11 +7195,11 @@ var LWC = (function (exports) {
       if (!isUndefined$1(tmpl.stylesheets)) {
         warnOnArrayMutation(tmpl.stylesheets);
       }
-      var _iterator5 = _createForOfIteratorHelper(TEMPLATE_PROPS),
-        _step5;
+      var _iterator10 = _createForOfIteratorHelper(TEMPLATE_PROPS),
+        _step10;
       try {
         var _loop3 = function _loop3() {
-          var prop = _step5.value;
+          var prop = _step10.value;
           var value = tmpl[prop];
           defineProperty(tmpl, prop, {
             enumerable: true,
@@ -7107,13 +7215,13 @@ var LWC = (function (exports) {
             }
           });
         };
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
           _loop3();
         }
       } catch (err) {
-        _iterator5.e(err);
+        _iterator10.e(err);
       } finally {
-        _iterator5.f();
+        _iterator10.f();
       }
       var originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
       defineProperty(tmpl, 'stylesheetTokens', {
@@ -7153,7 +7261,7 @@ var LWC = (function (exports) {
     }
     return ctor;
   }
-  /* version: 2.31.6 */
+  /* version: 2.31.8 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7835,17 +7943,17 @@ var LWC = (function (exports) {
     function flushPendingWhenDefinedCallbacks(tagName, ctor) {
       var resolvers = pendingWhenDefinedCallbacks.get(tagName);
       if (!isUndefined$1(resolvers)) {
-        var _iterator6 = _createForOfIteratorHelper(resolvers),
-          _step6;
+        var _iterator11 = _createForOfIteratorHelper(resolvers),
+          _step11;
         try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            var resolver = _step6.value;
+          for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+            var resolver = _step11.value;
             resolver(ctor);
           }
         } catch (err) {
-          _iterator6.e(err);
+          _iterator11.e(err);
         } finally {
-          _iterator6.f();
+          _iterator11.f();
         }
       }
       pendingWhenDefinedCallbacks.delete(tagName);
@@ -7895,11 +8003,11 @@ var LWC = (function (exports) {
       var awaiting = awaitingUpgrade.get(tagName);
       if (!isUndefined$1(awaiting)) {
         awaitingUpgrade.delete(tagName);
-        var _iterator7 = _createForOfIteratorHelper(awaiting),
-          _step7;
+        var _iterator12 = _createForOfIteratorHelper(awaiting),
+          _step12;
         try {
-          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-            var element = _step7.value;
+          for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+            var element = _step12.value;
             var registeredDefinition = pendingRegistryForElement.get(element);
             // At this point, registeredDefinition should never be undefined because awaitingUpgrade
             // is only populated when we haven't run internalUpgrade yet, and we only populate
@@ -7911,9 +8019,9 @@ var LWC = (function (exports) {
             }
           }
         } catch (err) {
-          _iterator7.e(err);
+          _iterator12.e(err);
         } finally {
-          _iterator7.f();
+          _iterator12.f();
         }
       }
       // If anyone called customElements.whenDefined() and is still waiting for a promise resolution, resolve now
@@ -8184,7 +8292,7 @@ var LWC = (function (exports) {
       function isNull(obj) {
         return obj === null;
       }
-      /** version: 2.31.6 */
+      /** version: 2.31.8 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8243,17 +8351,17 @@ var LWC = (function (exports) {
         exports.createFragment = function (html) {
           var wrapperTags = topLevelWrappingMap[getTagName(html)];
           if (!isUndefined(wrapperTags)) {
-            var _iterator8 = _createForOfIteratorHelper(wrapperTags),
-              _step8;
+            var _iterator13 = _createForOfIteratorHelper(wrapperTags),
+              _step13;
             try {
-              for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-                var wrapperTag = _step8.value;
+              for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
+                var wrapperTag = _step13.value;
                 html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
               }
             } catch (err) {
-              _iterator8.e(err);
+              _iterator13.e(err);
             } finally {
-              _iterator8.f();
+              _iterator13.f();
             }
           }
           // For IE11, the document title must not be undefined, but it can be an empty string
@@ -8262,7 +8370,7 @@ var LWC = (function (exports) {
           doc.body.innerHTML = html;
           var content = doc.body;
           if (!isUndefined(wrapperTags)) {
-            for (var _i33 = 0; _i33 < wrapperTags.length; _i33++) {
+            for (var _i34 = 0; _i34 < wrapperTags.length; _i34++) {
               content = content.firstChild;
             }
           }
@@ -8455,8 +8563,8 @@ var LWC = (function (exports) {
       tagName: element.tagName.toLowerCase(),
       hydrated: true
     });
-    for (var _i34 = 0, _Object$entries2 = Object.entries(props); _i34 < _Object$entries2.length; _i34++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i34], 2),
+    for (var _i35 = 0, _Object$entries2 = Object.entries(props); _i35 < _Object$entries2.length; _i35++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i35], 2),
         key = _Object$entries2$_i[0],
         value = _Object$entries2$_i[1];
       element[key] = value;
@@ -8750,7 +8858,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.31.6 */
+  /* version: 2.31.8 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;