lwc 2.38.0 → 2.39.0

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

@@ -318,7 +318,7 @@
       CACHED_ATTRIBUTE_PROPERTY_MAPPING.set(attrName, propertyName);
       return propertyName;
     }
-    /** version: 2.38.0 */
+    /** version: 2.39.0 */
 
     /**
      * Copyright (C) 2018 salesforce.com, inc.
@@ -390,7 +390,7 @@
      */
     function setFeatureFlagForTest(name, value) {
     }
-    /** version: 2.38.0 */
+    /** version: 2.39.0 */
 
     /**
      * Copyright (C) 2018 salesforce.com, inc.
@@ -454,7 +454,7 @@
         }
       }
     }
-    /** version: 2.38.0 */
+    /** version: 2.39.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -2567,10 +2567,131 @@
     }
     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 _i13 = weakRefs.length - 1; _i13 >= 0; _i13--) {
+            var vm = weakRefs[_i13].deref();
+            if (isUndefined$1(vm)) {
+              ArraySplice.call(weakRefs, _i13, 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 _iterator5 = _createForOfIteratorHelper(weakRefs),
+            _step5;
+          try {
+            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+              var weakRef = _step5.value;
+              var vm = weakRef.deref();
+              if (!isUndefined$1(vm)) {
+                result.add(vm);
+              }
+            }
+          } catch (err) {
+            _iterator5.e(err);
+          } finally {
+            _iterator5.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;
     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 getStyleOrSwappedStyle(style) {
       assertNotProd(); // this method should never leak to prod
       var visited = new Set();
@@ -2584,42 +2705,36 @@
       assertNotProd(); // this method should never leak to prod
       // 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);
+          var _iterator9 = _createForOfIteratorHelper(flattenStylesheets(stylesheets)),
+            _step9;
+          try {
+            for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+              var stylesheet = _step9.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);
             }
-            // this will allow us to keep track of the stylesheet that are
-            // being used by a hot component
-            stylesheetVMs.add(vm);
-          });
+          } catch (err) {
+            _iterator9.e(err);
+          } finally {
+            _iterator9.f();
+          }
         }
       }
     }
@@ -2894,8 +3009,8 @@
     function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
       var content = [];
       var root;
-      for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
-        var stylesheet = stylesheets[_i13];
+      for (var _i14 = 0; _i14 < stylesheets.length; _i14++) {
+        var stylesheet = stylesheets[_i14];
         if (isArray$1(stylesheet)) {
           ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
         } else {
@@ -2993,8 +3108,8 @@
         shadowMode = vm.shadowMode,
         insertStylesheet = vm.renderer.insertStylesheet;
       if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-        for (var _i14 = 0; _i14 < stylesheets.length; _i14++) {
-          insertStylesheet(stylesheets[_i14]);
+        for (var _i15 = 0; _i15 < stylesheets.length; _i15++) {
+          insertStylesheet(stylesheets[_i15]);
         }
       } else if (vm.hydrated) {
         // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
@@ -3007,8 +3122,8 @@
         var root = getNearestNativeShadowComponent(vm);
         // null root means a global style
         var target = isNull(root) ? undefined : root.shadowRoot;
-        for (var _i15 = 0; _i15 < stylesheets.length; _i15++) {
-          insertStylesheet(stylesheets[_i15], target);
+        for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
+          insertStylesheet(stylesheets[_i16], target);
         }
       }
       return null;
@@ -3310,8 +3425,8 @@
         return;
       }
       var setCSSStyleProperty = renderer.setCSSStyleProperty;
-      for (var _i16 = 0; _i16 < styleDecls.length; _i16++) {
-        var _styleDecls$_i = _slicedToArray(styleDecls[_i16], 3),
+      for (var _i17 = 0; _i17 < styleDecls.length; _i17++) {
+        var _styleDecls$_i = _slicedToArray(styleDecls[_i17], 3),
           prop = _styleDecls$_i[0],
           value = _styleDecls$_i[1],
           important = _styleDecls$_i[2];
@@ -3521,8 +3636,9 @@
       }
     }
     function patchCustomElement(n1, n2, parent, renderer) {
+      // TODO [#3331]: This if branch should be removed in 246 with lwc:dynamic
       if (n1.ctor !== n2.ctor) {
-        // If the constructor, unmount the current component and mount a new one using the new
+        // If the constructor differs, unmount the current component and mount a new one using the new
         // constructor.
         var anchor = renderer.nextSibling(n1.elm);
         unmount(n1, parent, renderer, true);
@@ -3734,8 +3850,8 @@
       // If no VFragment is found in children, we don't need to traverse anything or mark the children dynamic and can return early.
       var nodeStack = [];
       var fragmentFound = false;
-      for (var _i17 = children.length - 1; _i17 > -1; _i17 -= 1) {
-        var child = children[_i17];
+      for (var _i18 = children.length - 1; _i18 > -1; _i18 -= 1) {
+        var child = children[_i18];
         ArrayPush$1.call(nodeStack, child);
         fragmentFound = fragmentFound || !!(child && isVFragment(child));
       }
@@ -3747,8 +3863,8 @@
         if (!isNull(currentNode) && isVFragment(currentNode)) {
           var fChildren = currentNode.children;
           // Ignore the start and end text node delimiters
-          for (var _i18 = fChildren.length - 2; _i18 > 0; _i18 -= 1) {
-            ArrayPush$1.call(nodeStack, fChildren[_i18]);
+          for (var _i19 = fChildren.length - 2; _i19 > 0; _i19 -= 1) {
+            ArrayPush$1.call(nodeStack, fChildren[_i19]);
           }
         } else {
           ArrayPush$1.call(flattenedChildren, currentNode);
@@ -3784,8 +3900,8 @@
       var oldSlotsMapping = vm.cmpSlots.slotAssignments;
       var cmpSlotsMapping = create(null);
       // Collect all slots into cmpSlotsMapping
-      for (var _i19 = 0, len = children.length; _i19 < len; _i19 += 1) {
-        var vnode = children[_i19];
+      for (var _i20 = 0, len = children.length; _i20 < len; _i20 += 1) {
+        var vnode = children[_i20];
         if (isNull(vnode)) {
           continue;
         }
@@ -3815,8 +3931,8 @@
           markComponentAsDirty(vm);
           return;
         }
-        for (var _i20 = 0, _len2 = oldKeys.length; _i20 < _len2; _i20 += 1) {
-          var key = oldKeys[_i20];
+        for (var _i21 = 0, _len2 = oldKeys.length; _i21 < _len2; _i21 += 1) {
+          var key = oldKeys[_i21];
           if (isUndefined$1(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
             markComponentAsDirty(vm);
             return;
@@ -3939,11 +4055,11 @@
         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 _i21 = newEndIdx;
+          var _i22 = newEndIdx;
           var n;
           do {
-            n = newCh[++_i21];
-          } while (!isVNode(n) && _i21 < newChEnd);
+            n = newCh[++_i22];
+          } while (!isVNode(n) && _i22 < newChEnd);
           before = isVNode(n) ? n.elm : null;
           mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
         } else {
@@ -3968,15 +4084,22 @@
       // 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 _i22 = c2Length - 1; _i22 >= 0; _i22 -= 1) {
-        var n1 = c1[_i22];
-        var n2 = c2[_i22];
+      for (var _i23 = c2Length - 1; _i23 >= 0; _i23 -= 1) {
+        var n1 = c1[_i23];
+        var n2 = c2[_i23];
         if (n2 !== n1) {
           if (isVNode(n1)) {
             if (isVNode(n2)) {
-              // both vnodes are equivalent, and we just need to patch them
-              patch(n1, n2, parent, renderer);
-              anchor = n2.elm;
+              if (isSameVnode(n1, n2)) {
+                // both vnodes are equivalent, and we just need to patch them
+                patch(n1, n2, parent, renderer);
+                anchor = n2.elm;
+              } else {
+                // removing the old vnode since the new one is different
+                unmount(n1, parent, renderer, true);
+                mount(n2, parent, renderer, anchor);
+                anchor = n2.elm;
+              }
             } else {
               // removing the old vnode since the new one is null
               unmount(n1, parent, renderer, true);
@@ -4067,8 +4190,8 @@
       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 _i23 = 0; _i23 < slotAssignments.length; _i23++) {
-          var vnode = slotAssignments[_i23];
+        for (var _i24 = 0; _i24 < slotAssignments.length; _i24++) {
+          var vnode = slotAssignments[_i24];
           if (!isNull(vnode)) {
             var assignedNodeIsScopedSlot = isVScopedSlotFragment(vnode);
             // The only sniff test for a scoped <slot> element is the presence of `slotData`
@@ -4272,12 +4395,14 @@
       return url;
     }
     /**
-     * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
+     * [ddc] - create a (deprecated) dynamic component via `<x-foo lwc:dynamic={Ctor}>`
+     *
+     * TODO [#3331]: remove usage of lwc:dynamic in 246
      */
-    function dc(sel, Ctor, data) {
+    function ddc(sel, Ctor, data) {
       var children = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : EmptyArray;
       // null or undefined values should produce a null value in the VNodes
-      if (Ctor == null) {
+      if (isNull(Ctor) || isUndefined$1(Ctor)) {
         return null;
       }
       if (!isComponentConstructor(Ctor)) {
@@ -4285,6 +4410,27 @@
       }
       return c(sel, Ctor, data, children);
     }
+    /**
+     * [dc] - create a dynamic component via `<lwc:component lwc:is={Ctor}>`
+     */
+    function dc(Ctor, data) {
+      var children = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EmptyArray;
+      // Null or undefined values should produce a null value in the VNodes.
+      // This is the only value at compile time as the constructor will not be known.
+      if (isNull(Ctor) || isUndefined$1(Ctor)) {
+        return null;
+      }
+      if (!isComponentConstructor(Ctor)) {
+        throw new Error("Invalid constructor ".concat(toString$1(Ctor), " is not a LightningElement constructor."));
+      }
+      // Look up the dynamic component's name at runtime once the constructor is available.
+      // This information is only known at runtime and is stored as part of registerComponent.
+      var sel = getComponentRegisteredName(Ctor);
+      if (isUndefined$1(sel) || sel === '') {
+        throw new Error("Invalid LWC constructor ".concat(toString$1(Ctor), " does not have a registered name"));
+      }
+      return c(sel, Ctor, data, children);
+    }
     /**
      * slow children collection marking mechanism. this API allows the compiler to signal
      * to the engine that a particular collection of children must be diffed using the slow
@@ -4343,7 +4489,8 @@
       gid: gid,
       fid: fid,
       shc: shc,
-      ssf: ssf
+      ssf: ssf,
+      ddc: ddc
     });
     /** Indicates if operations should be logged by the profiler. */
     var isProfilerEnabled = false;
@@ -4456,23 +4603,23 @@
           var classAttrToken = hasScopedStyles && hasStyleToken ? " class=\"".concat(stylesheetToken, "\"") : '';
           var attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
           var htmlFragment = '';
-          for (var _i24 = 0, n = keys.length; _i24 < n; _i24++) {
-            switch (keys[_i24]) {
+          for (var _i25 = 0, n = keys.length; _i25 < n; _i25++) {
+            switch (keys[_i25]) {
               case 0:
                 // styleToken in existing class attr
-                htmlFragment += strings[_i24] + classToken;
+                htmlFragment += strings[_i25] + classToken;
                 break;
               case 1:
                 // styleToken for added class attr
-                htmlFragment += strings[_i24] + classAttrToken;
+                htmlFragment += strings[_i25] + classAttrToken;
                 break;
               case 2:
                 // styleToken as attr
-                htmlFragment += strings[_i24] + attrToken;
+                htmlFragment += strings[_i25] + attrToken;
                 break;
               case 3:
                 // ${1}${2}
-                htmlFragment += strings[_i24] + classAttrToken + attrToken;
+                htmlFragment += strings[_i25] + classAttrToken + attrToken;
                 break;
             }
           }
@@ -4560,8 +4707,8 @@
     }
     function computeHasScopedStylesInStylesheets(stylesheets) {
       if (hasStyles(stylesheets)) {
-        for (var _i25 = 0; _i25 < stylesheets.length; _i25++) {
-          if (isTrue(stylesheets[_i25][KEY__SCOPED_CSS])) {
+        for (var _i26 = 0; _i26 < stylesheets.length; _i26++) {
+          if (isTrue(stylesheets[_i26][KEY__SCOPED_CSS])) {
             return true;
           }
         }
@@ -4659,24 +4806,29 @@
      * SPDX-License-Identifier: MIT
      * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
      */
-    var signedTemplateMap = new Map();
+    var registeredComponentMap = new Map();
     /**
      * INTERNAL: This function can only be invoked by compiled code. The compiler
      * will prevent this function from being imported by userland code.
      */
     function registerComponent(
     // We typically expect a LightningElementConstructor, but technically you can call this with anything
-    Ctor, _ref3) {
-      var tmpl = _ref3.tmpl;
+    Ctor, metadata) {
       if (isFunction$1(Ctor)) {
-        signedTemplateMap.set(Ctor, tmpl);
+        // TODO [#3331]: add validation to check the value of metadata.sel is not an empty string.
+        registeredComponentMap.set(Ctor, metadata);
       }
       // chaining this method as a way to wrap existing assignment of component constructor easily,
       // without too much transformation
       return Ctor;
     }
     function getComponentRegisteredTemplate(Ctor) {
-      return signedTemplateMap.get(Ctor);
+      var _a;
+      return (_a = registeredComponentMap.get(Ctor)) === null || _a === void 0 ? void 0 : _a.tmpl;
+    }
+    function getComponentRegisteredName(Ctor) {
+      var _a;
+      return (_a = registeredComponentMap.get(Ctor)) === null || _a === void 0 ? void 0 : _a.sel;
     }
     function getTemplateReactiveObserver(vm) {
       return createReactiveObserver(function () {
@@ -4727,8 +4879,8 @@
      * subject to change or being removed.
      */
     function register(service) {
-      for (var _i26 = 0; _i26 < hooks.length; ++_i26) {
-        var hookName = hooks[_i26];
+      for (var _i27 = 0; _i27 < hooks.length; ++_i27) {
+        var hookName = hooks[_i27];
         if (hookName in service) {
           var l = Services[hookName];
           if (isUndefined$1(l)) {
@@ -4742,8 +4894,8 @@
       var component = vm.component,
         def = vm.def,
         context = vm.context;
-      for (var _i27 = 0, len = cbs.length; _i27 < len; ++_i27) {
-        cbs[_i27].call(undefined, component, {}, def, context);
+      for (var _i28 = 0, len = cbs.length; _i28 < len; ++_i28) {
+        cbs[_i28].call(undefined, component, {}, def, context);
       }
     }
 
@@ -4880,8 +5032,8 @@
       var valid = true;
       var validate = function validate(arrayOrStylesheet) {
         if (isArray$1(arrayOrStylesheet)) {
-          for (var _i28 = 0; _i28 < arrayOrStylesheet.length; _i28++) {
-            validate(arrayOrStylesheet[_i28]);
+          for (var _i29 = 0; _i29 < arrayOrStylesheet.length; _i29++) {
+            validate(arrayOrStylesheet[_i29]);
           }
         } else if (!isFunction$1(arrayOrStylesheet)) {
           // function assumed to be a stylesheet factory
@@ -5014,17 +5166,17 @@
         return a.idx - b.idx;
       });
       rehydrateQueue = []; // reset to a new queue
-      for (var _i29 = 0, len = vms.length; _i29 < len; _i29 += 1) {
-        var vm = vms[_i29];
+      for (var _i30 = 0, len = vms.length; _i30 < len; _i30 += 1) {
+        var vm = vms[_i30];
         try {
           rehydrate(vm);
         } catch (error) {
-          if (_i29 + 1 < len) {
+          if (_i30 + 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, _i29 + 1));
+            ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i30 + 1));
           }
           // we need to end the measure before throwing.
           logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
@@ -5090,8 +5242,8 @@
       var vCustomElementCollection = vm.velements;
       // Reporting disconnection for every child in inverse order since they are
       // inserted in reserved order.
-      for (var _i30 = vCustomElementCollection.length - 1; _i30 >= 0; _i30 -= 1) {
-        var elm = vCustomElementCollection[_i30].elm;
+      for (var _i31 = vCustomElementCollection.length - 1; _i31 >= 0; _i31 -= 1) {
+        var elm = vCustomElementCollection[_i31].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
@@ -5122,8 +5274,8 @@
      * defined on its shadow.
      */
     function recursivelyDisconnectChildren(vnodes) {
-      for (var _i31 = 0, len = vnodes.length; _i31 < len; _i31 += 1) {
-        var vnode = vnodes[_i31];
+      for (var _i32 = 0, len = vnodes.length; _i32 < len; _i32 += 1) {
+        var vnode = vnodes[_i32];
         if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
           switch (vnode.type) {
             case 2 /* VNodeType.Element */:
@@ -5144,19 +5296,30 @@
     // 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 _i32 = 0, len = children.length; _i32 < len; _i32++) {
-        var child = children[_i32];
-        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 _i33 = 0, len = vnodes.length; _i33 < len; _i33 += 1) {
+        var vnode = vnodes[_i33];
+        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;
@@ -5255,17 +5418,17 @@
           // if our id is null or empty, nobody can reference us
           return;
         }
-        var _iterator5 = _createForOfIteratorHelper(ID_REFERENCING_ATTRIBUTES_SET),
-          _step5;
+        var _iterator10 = _createForOfIteratorHelper(ID_REFERENCING_ATTRIBUTES_SET),
+          _step10;
         try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var idRefAttrName = _step5.value;
+          for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+            var idRefAttrName = _step10.value;
             // Query all global elements with this attribute. The attribute selector syntax `~=` is for values
             // that reference multiple IDs, separated by whitespace.
             var query = "[".concat(idRefAttrName, "~=\"").concat(CSS.escape(attrValue), "\"]");
             var sourceElements = querySelectorAll.call(document, query);
-            for (var _i33 = 0; _i33 < sourceElements.length; _i33++) {
-              var sourceElement = sourceElements[_i33];
+            for (var _i34 = 0; _i34 < sourceElements.length; _i34++) {
+              var sourceElement = sourceElements[_i34];
               var sourceRoot = sourceElement.getRootNode();
               if (sourceRoot !== root) {
                 reportViolation$1(sourceElement, elm, idRefAttrName);
@@ -5274,18 +5437,18 @@
             }
           }
         } catch (err) {
-          _iterator5.e(err);
+          _iterator10.e(err);
         } finally {
-          _iterator5.f();
+          _iterator10.f();
         }
       } else {
         // elm is the source, find the target
         var ids = parseIdRefAttributeValue(attrValue);
-        var _iterator6 = _createForOfIteratorHelper(ids),
-          _step6;
+        var _iterator11 = _createForOfIteratorHelper(ids),
+          _step11;
         try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            var id = _step6.value;
+          for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+            var id = _step11.value;
             var target = getElementById.call(document, id);
             if (!isNull(target)) {
               var targetRoot = target.getRootNode();
@@ -5296,9 +5459,9 @@
             }
           }
         } catch (err) {
-          _iterator6.e(err);
+          _iterator11.e(err);
         } finally {
-          _iterator6.f();
+          _iterator11.f();
         }
       }
     }
@@ -5423,11 +5586,11 @@
     function enableDetection() {
       var _Element = Element,
         prototype = _Element.prototype;
-      var _iterator7 = _createForOfIteratorHelper(NON_STANDARD_ARIA_PROPS),
-        _step7;
+      var _iterator12 = _createForOfIteratorHelper(NON_STANDARD_ARIA_PROPS),
+        _step12;
       try {
         var _loop3 = function _loop3() {
-          var prop = _step7.value;
+          var prop = _step12.value;
           var descriptor = getOwnPropertyDescriptor$1(prototype, prop);
           // The descriptor should exist because the @lwc/aria-reflection polyfill has run by now.
           // This happens automatically because of the ordering of imports.
@@ -5448,13 +5611,13 @@
             enumerable: true
           });
         };
-        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+        for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
           _loop3();
         }
       } catch (err) {
-        _iterator7.e(err);
+        _iterator12.e(err);
       } finally {
-        _iterator7.f();
+        _iterator12.f();
       }
     }
     // No point in running this code if we're not in a browser, or if the global polyfill is not loaded
@@ -5616,8 +5779,8 @@
       var nextNode = node;
       var anchor = null;
       var renderer = owner.renderer;
-      for (var _i34 = 0; _i34 < children.length; _i34++) {
-        var childVnode = children[_i34];
+      for (var _i35 = 0; _i35 < children.length; _i35++) {
+        var childVnode = children[_i35];
         if (!isNull(childVnode)) {
           if (nextNode) {
             nextNode = hydrateNode(nextNode, childVnode, renderer);
@@ -5691,8 +5854,8 @@
       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 _i35 = 0, _Object$entries = Object.entries(attrs); _i35 < _Object$entries.length; _i35++) {
-        var _Object$entries$_i = _slicedToArray(_Object$entries[_i35], 2),
+      for (var _i36 = 0, _Object$entries = Object.entries(attrs); _i36 < _Object$entries.length; _i36++) {
+        var _Object$entries$_i = _slicedToArray(_Object$entries[_i36], 2),
           attrName = _Object$entries$_i[0],
           attrValue = _Object$entries$_i[1];
         vnode.owner;
@@ -5779,8 +5942,8 @@
         var parsedVnodeStyle = parseStyleText(elmStyle);
         var expectedStyle = [];
         // styleMap is used when style is set to static value.
-        for (var _i36 = 0, n = styleDecls.length; _i36 < n; _i36++) {
-          var _styleDecls$_i2 = _slicedToArray(styleDecls[_i36], 3),
+        for (var _i37 = 0, n = styleDecls.length; _i37 < n; _i37++) {
+          var _styleDecls$_i2 = _slicedToArray(styleDecls[_i37], 3),
             prop = _styleDecls$_i2[0],
             value = _styleDecls$_i2[1],
             important = _styleDecls$_i2[2];
@@ -5899,11 +6062,11 @@
     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 _iterator8 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
-        _step8;
+      var _iterator13 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
+        _step13;
       try {
         var _loop4 = function _loop4() {
-          var prop = _step8.value;
+          var prop = _step13.value;
           var originalArrayMethod = getOriginalArrayMethod(prop);
           stylesheets[prop] = function arrayMutationWarningWrapper() {
             reportTemplateViolation('stylesheets');
@@ -5911,23 +6074,23 @@
             return originalArrayMethod.apply(this, arguments);
           };
         };
-        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+        for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
           _loop4();
         }
       } catch (err) {
-        _iterator8.e(err);
+        _iterator13.e(err);
       } finally {
-        _iterator8.f();
+        _iterator13.f();
       }
     }
     // Warn if the user tries to mutate a stylesheet factory function, e.g.:
     // `stylesheet.$scoped$ = true`
     function warnOnStylesheetFunctionMutation(stylesheet) {
-      var _iterator9 = _createForOfIteratorHelper(STYLESHEET_PROPS),
-        _step9;
+      var _iterator14 = _createForOfIteratorHelper(STYLESHEET_PROPS),
+        _step14;
       try {
         var _loop5 = function _loop5() {
-          var prop = _step9.value;
+          var prop = _step14.value;
           var value = stylesheet[prop];
           defineProperty(stylesheet, prop, {
             enumerable: true,
@@ -5941,13 +6104,13 @@
             }
           });
         };
-        for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+        for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
           _loop5();
         }
       } catch (err) {
-        _iterator9.e(err);
+        _iterator14.e(err);
       } finally {
-        _iterator9.f();
+        _iterator14.f();
       }
     }
     // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
@@ -5969,8 +6132,8 @@
     // Deep-traverse an array (of arrays) of stylesheet factory functions, and call the callback for every array/function
     function traverseStylesheets(stylesheets, callback) {
       callback(stylesheets);
-      for (var _i37 = 0; _i37 < stylesheets.length; _i37++) {
-        var stylesheet = stylesheets[_i37];
+      for (var _i38 = 0; _i38 < stylesheets.length; _i38++) {
+        var stylesheet = stylesheets[_i38];
         if (isArray$1(stylesheet)) {
           traverseStylesheets(stylesheet, callback);
         } else {
@@ -5982,11 +6145,11 @@
       if (!isUndefined$1(tmpl.stylesheets)) {
         trackStylesheetsMutation(tmpl.stylesheets);
       }
-      var _iterator10 = _createForOfIteratorHelper(TEMPLATE_PROPS),
-        _step10;
+      var _iterator15 = _createForOfIteratorHelper(TEMPLATE_PROPS),
+        _step15;
       try {
         var _loop6 = function _loop6() {
-          var prop = _step10.value;
+          var prop = _step15.value;
           var value = tmpl[prop];
           defineProperty(tmpl, prop, {
             enumerable: true,
@@ -6002,13 +6165,13 @@
             }
           });
         };
-        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+        for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
           _loop6();
         }
       } catch (err) {
-        _iterator10.e(err);
+        _iterator15.e(err);
       } finally {
-        _iterator10.f();
+        _iterator15.f();
       }
       var originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
       defineProperty(tmpl, 'stylesheetTokens', {
@@ -6447,7 +6610,7 @@
         function isNull(obj) {
           return obj === null;
         }
-        /** version: 2.38.0 */
+        /** version: 2.39.0 */
 
         /*
          * Copyright (c) 2023, salesforce.com, inc.
@@ -6458,10 +6621,10 @@
         var WireContextSubscriptionEvent = /*#__PURE__*/function (_CustomEvent) {
           _inherits(WireContextSubscriptionEvent, _CustomEvent);
           var _super6 = _createSuper(WireContextSubscriptionEvent);
-          function WireContextSubscriptionEvent(adapterToken, _ref6) {
+          function WireContextSubscriptionEvent(adapterToken, _ref5) {
             var _this3;
-            var setNewContext = _ref6.setNewContext,
-              setDisconnectedCallback = _ref6.setDisconnectedCallback;
+            var setNewContext = _ref5.setNewContext,
+              setDisconnectedCallback = _ref5.setDisconnectedCallback;
             _classCallCheck(this, WireContextSubscriptionEvent);
             _this3 = _super6.call(this, adapterToken, {
               bubbles: true,
@@ -6545,17 +6708,17 @@
           exports.createFragment = function (html) {
             var wrapperTags = topLevelWrappingMap[getTagName(html)];
             if (!isUndefined(wrapperTags)) {
-              var _iterator11 = _createForOfIteratorHelper(wrapperTags),
-                _step11;
+              var _iterator16 = _createForOfIteratorHelper(wrapperTags),
+                _step16;
               try {
-                for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-                  var wrapperTag = _step11.value;
+                for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
+                  var wrapperTag = _step16.value;
                   html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
                 }
               } catch (err) {
-                _iterator11.e(err);
+                _iterator16.e(err);
               } finally {
-                _iterator11.f();
+                _iterator16.f();
               }
             }
             // For IE11, the document title must not be undefined, but it can be an empty string
@@ -6564,7 +6727,7 @@
             doc.body.innerHTML = html;
             var content = doc.body;
             if (!isUndefined(wrapperTags)) {
-              for (var _i38 = 0; _i38 < wrapperTags.length; _i38++) {
+              for (var _i39 = 0; _i39 < wrapperTags.length; _i39++) {
                 content = content.firstChild;
               }
             }
@@ -6763,8 +6926,8 @@
         tagName: element.tagName.toLowerCase(),
         hydrated: true
       });
-      for (var _i39 = 0, _Object$entries2 = Object.entries(props); _i39 < _Object$entries2.length; _i39++) {
-        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i39], 2),
+      for (var _i40 = 0, _Object$entries2 = Object.entries(props); _i40 < _Object$entries2.length; _i40++) {
+        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i40], 2),
           key = _Object$entries2$_i[0],
           value = _Object$entries2$_i[1];
         element[key] = value;
@@ -7082,7 +7245,7 @@
         });
       });
     }
-    /* version: 2.38.0 */
+    /* version: 2.39.0 */
 
     exports.LightningElement = LightningElement;
     exports.__unstable__ProfilerControl = profilerControl;