@lwc/engine-core 2.25.1 → 2.27.0

package/dist/engine-core.cjs.js

@@ -1465,7 +1465,9 @@ const refsCache = new WeakMap();
 const LightningElement = function () {
     // This should be as performant as possible, while any initialization should be done lazily
     if (shared.isNull(vmBeingConstructed)) {
-        throw new ReferenceError('Illegal constructor');
+        // Thrown when doing something like `new LightningElement()` or
+        // `class Foo extends LightningElement {}; new Foo()`
+        throw new TypeError('Illegal constructor');
     }
     const vm = vmBeingConstructed;
     const { def, elm } = vm;
@@ -2529,274 +2531,213 @@ const swappedStyleMap = new WeakMap();
 const activeTemplates = new WeakMap();
 const activeComponents = new WeakMap();
 const activeStyles = new WeakMap();
-
 function rehydrateHotTemplate(tpl) {
-  const list = activeTemplates.get(tpl);
-
-  if (!shared.isUndefined(list)) {
-    list.forEach(vm => {
-      if (shared.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
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return true;
+    const list = activeTemplates.get(tpl);
+    if (!shared.isUndefined(list)) {
+        list.forEach((vm) => {
+            if (shared.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
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return true;
 }
-
 function rehydrateHotStyle(style) {
-  const list = activeStyles.get(style);
-
-  if (!shared.isUndefined(list)) {
-    list.forEach(vm => {
-      // 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
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return true;
+    const list = activeStyles.get(style);
+    if (!shared.isUndefined(list)) {
+        list.forEach((vm) => {
+            // 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
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return true;
 }
-
 function rehydrateHotComponent(Ctor) {
-  const list = activeComponents.get(Ctor);
-  let canRefreshAllInstances = true;
-
-  if (!shared.isUndefined(list)) {
-    list.forEach(vm => {
-      const {
-        owner
-      } = vm;
-
-      if (!shared.isNull(owner)) {
-        // if a component class definition is swapped, we must reset
-        // owner's template content in the next micro-task:
-        forceRehydration(owner);
-      } else {
-        // the hot swapping for components only work for instances of components
-        // created from a template, root elements can't be swapped because we
-        // don't have a way to force the creation of the element with the same state
-        // of the current element.
-        // Instead, we can report the problem to the caller so it can take action,
-        // 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
-    // they will get re-associated once these instances are rehydrated.
-
-    list.clear();
-  }
-
-  return canRefreshAllInstances;
+    const list = activeComponents.get(Ctor);
+    let canRefreshAllInstances = true;
+    if (!shared.isUndefined(list)) {
+        list.forEach((vm) => {
+            const { owner } = vm;
+            if (!shared.isNull(owner)) {
+                // if a component class definition is swapped, we must reset
+                // owner's template content in the next micro-task:
+                forceRehydration(owner);
+            }
+            else {
+                // the hot swapping for components only work for instances of components
+                // created from a template, root elements can't be swapped because we
+                // don't have a way to force the creation of the element with the same state
+                // of the current element.
+                // Instead, we can report the problem to the caller so it can take action,
+                // 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
+        // they will get re-associated once these instances are rehydrated.
+        list.clear();
+    }
+    return canRefreshAllInstances;
 }
-
 function getTemplateOrSwappedTemplate(tpl) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
-      visited.add(tpl);
-      tpl = swappedTemplateMap.get(tpl);
+        visited.add(tpl);
+        tpl = swappedTemplateMap.get(tpl);
     }
-  }
-
-  return tpl;
+    return tpl;
 }
 function getComponentOrSwappedComponent(Ctor) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
-      visited.add(Ctor);
-      Ctor = swappedComponentMap.get(Ctor);
+        visited.add(Ctor);
+        Ctor = swappedComponentMap.get(Ctor);
     }
-  }
-
-  return Ctor;
+    return Ctor;
 }
 function getStyleOrSwappedStyle(style) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     const visited = new Set();
-
     while (swappedStyleMap.has(style) && !visited.has(style)) {
-      visited.add(style);
-      style = swappedStyleMap.get(style);
+        visited.add(style);
+        style = swappedStyleMap.get(style);
     }
-  }
-
-  return style;
+    return style;
 }
 function setActiveVM(vm) {
-  if (process.env.NODE_ENV === 'production') {
-    // this method should never leak to prod
-    throw new ReferenceError();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     // tracking active component
     const Ctor = vm.def.ctor;
     let componentVMs = activeComponents.get(Ctor);
-
     if (shared.isUndefined(componentVMs)) {
-      componentVMs = new Set();
-      activeComponents.set(Ctor, componentVMs);
-    } // this will allow us to keep track of the hot components
-
-
-    componentVMs.add(vm); // tracking active template
-
+        componentVMs = new Set();
+        activeComponents.set(Ctor, componentVMs);
+    }
+    // this will allow us to keep track of the hot components
+    componentVMs.add(vm);
+    // tracking active template
     const tpl = vm.cmpTemplate;
-
     if (tpl) {
-      let templateVMs = activeTemplates.get(tpl);
-
-      if (shared.isUndefined(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); // tracking active styles associated to template
-
-      const stylesheets = tpl.stylesheets;
-
-      if (!shared.isUndefined(stylesheets)) {
-        flattenStylesheets(stylesheets).forEach(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);
-          let stylesheetVMs = activeStyles.get(stylesheet);
-
-          if (shared.isUndefined(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);
-        });
-      }
+        let templateVMs = activeTemplates.get(tpl);
+        if (shared.isUndefined(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);
+        // tracking active styles associated to template
+        const stylesheets = tpl.stylesheets;
+        if (!shared.isUndefined(stylesheets)) {
+            flattenStylesheets(stylesheets).forEach((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);
+                let stylesheetVMs = activeStyles.get(stylesheet);
+                if (shared.isUndefined(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();
-  }
-
-  if (features.lwcRuntimeFlags.ENABLE_HMR) {
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
     // tracking inactive component
     const Ctor = vm.def.ctor;
     let list = activeComponents.get(Ctor);
-
     if (!shared.isUndefined(list)) {
-      // deleting the vm from the set to avoid leaking memory
-      list.delete(vm);
-    } // removing inactive template
-
-
-    const tpl = vm.cmpTemplate;
-
-    if (tpl) {
-      list = activeTemplates.get(tpl);
-
-      if (!shared.isUndefined(list)) {
         // deleting the vm from the set to avoid leaking memory
         list.delete(vm);
-      } // removing active styles associated to template
-
-
-      const styles = tpl.stylesheets;
-
-      if (!shared.isUndefined(styles)) {
-        flattenStylesheets(styles).forEach(style => {
-          list = activeStyles.get(style);
-
-          if (!shared.isUndefined(list)) {
+    }
+    // removing inactive template
+    const tpl = vm.cmpTemplate;
+    if (tpl) {
+        list = activeTemplates.get(tpl);
+        if (!shared.isUndefined(list)) {
             // deleting the vm from the set to avoid leaking memory
             list.delete(vm);
-          }
-        });
-      }
+        }
+        // removing active styles associated to template
+        const styles = tpl.stylesheets;
+        if (!shared.isUndefined(styles)) {
+            flattenStylesheets(styles).forEach((style) => {
+                list = activeStyles.get(style);
+                if (!shared.isUndefined(list)) {
+                    // deleting the vm from the set to avoid leaking memory
+                    list.delete(vm);
+                }
+            });
+        }
     }
-  }
 }
 function swapTemplate(oldTpl, newTpl) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (isTemplateRegistered(oldTpl) && isTemplateRegistered(newTpl)) {
-      swappedTemplateMap.set(oldTpl, newTpl);
-      return rehydrateHotTemplate(oldTpl);
-    } else {
-      throw new TypeError(`Invalid Template`);
+    if (process.env.NODE_ENV !== 'production') {
+        if (isTemplateRegistered(oldTpl) && isTemplateRegistered(newTpl)) {
+            swappedTemplateMap.set(oldTpl, newTpl);
+            return rehydrateHotTemplate(oldTpl);
+        }
+        else {
+            throw new TypeError(`Invalid Template`);
+        }
     }
-  }
-
-  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    return false;
 }
 function swapComponent(oldComponent, newComponent) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (isComponentConstructor(oldComponent) && isComponentConstructor(newComponent)) {
-      swappedComponentMap.set(oldComponent, newComponent);
-      return rehydrateHotComponent(oldComponent);
-    } else {
-      throw new TypeError(`Invalid Component`);
+    if (process.env.NODE_ENV !== 'production') {
+        if (isComponentConstructor(oldComponent) && isComponentConstructor(newComponent)) {
+            swappedComponentMap.set(oldComponent, newComponent);
+            return rehydrateHotComponent(oldComponent);
+        }
+        else {
+            throw new TypeError(`Invalid Component`);
+        }
     }
-  }
-
-  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    return false;
 }
 function swapStyle(oldStyle, newStyle) {
-  if (process.env.NODE_ENV !== 'production') {
-    // TODO [#1887]: once the support for registering styles is implemented
-    // we can add the validation of both styles around this block.
-    swappedStyleMap.set(oldStyle, newStyle);
-    return rehydrateHotStyle(oldStyle);
-  }
-
-  if (!features.lwcRuntimeFlags.ENABLE_HMR) {
-    throw new Error('HMR is not enabled');
-  }
-
-  return false;
+    if (process.env.NODE_ENV !== 'production') {
+        // TODO [#1887]: once the support for registering styles is implemented
+        // we can add the validation of both styles around this block.
+        swappedStyleMap.set(oldStyle, newStyle);
+        return rehydrateHotStyle(oldStyle);
+    }
+    return false;
 }
 
 /*
@@ -3207,15 +3148,18 @@ function getScopeTokenClass(owner) {
 /**
  * This function returns the host style token for a custom element if it
  * exists. Otherwise it returns null.
+ *
+ * A host style token is applied to the component if scoped styles are used.
  */
 
 function getStylesheetTokenHost(vnode) {
   const {
-    template: {
-      stylesheetToken
-    }
+    template
   } = getComponentInternalDef(vnode.ctor);
-  return !shared.isUndefined(stylesheetToken) ? makeHostToken(stylesheetToken) : null;
+  const {
+    stylesheetToken
+  } = template;
+  return !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
 }
 
 function getNearestNativeShadowComponent(vm) {
@@ -3269,75 +3213,6 @@ function createStylesheet(vm, stylesheets) {
   return null;
 }
 
-/*
- * Copyright (c) 2020, 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 checkHasVM(elm) {
-  const hasVM = !shared.isUndefined(getAssociatedVMIfPresent(elm));
-
-  if (process.env.NODE_ENV !== 'production' && !hasVM) {
-    // Occurs when an element is manually created with the same tag name as an existing LWC component. In that case,
-    // we skip calling the LWC connectedCallback/disconnectedCallback logic and log an error.
-    logError(`VM for tag name "${elm.tagName.toLowerCase()}" is undefined. ` + `This indicates that an element was created with this tag name, ` + `which is already reserved by an LWC component. Use lwc.createElement ` + `instead to create elements.`);
-  }
-
-  return hasVM;
-}
-
-function getUpgradableConstructor(tagName, renderer) {
-  const {
-    getCustomElement,
-    HTMLElementExported: RendererHTMLElement,
-    defineCustomElement
-  } = renderer; // Should never get a tag with upper case letter at this point, the compiler should
-  // produce only tags with lowercase letters
-  // But, for backwards compatibility, we will lower case the tagName
-
-  tagName = tagName.toLowerCase();
-  let CE = getCustomElement(tagName);
-
-  if (!shared.isUndefined(CE)) {
-    return CE;
-  }
-  /**
-   * LWC Upgradable Element reference to an element that was created
-   * via the scoped registry mechanism, and that is ready to be upgraded.
-   */
-
-
-  CE = class LWCUpgradableElement extends RendererHTMLElement {
-    constructor(upgradeCallback) {
-      super();
-
-      if (shared.isFunction(upgradeCallback)) {
-        upgradeCallback(this); // nothing to do with the result for now
-      }
-    }
-
-  };
-
-  if (features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
-    CE.prototype.connectedCallback = function () {
-      if (checkHasVM(this)) {
-        connectRootElement(this);
-      }
-    };
-
-    CE.prototype.disconnectedCallback = function () {
-      if (checkHasVM(this)) {
-        disconnectRootElement(this);
-      }
-    };
-  }
-
-  defineCustomElement(tagName, CE);
-  return CE;
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -3354,6 +3229,9 @@ function isSameVnode(vnode1, vnode2) {
 function isVCustomElement(vnode) {
     return vnode.type === 3 /* VNodeType.CustomElement */;
 }
+function isVScopedSlotFragment(vnode) {
+    return vnode.type === 6 /* VNodeType.ScopedSlotFragment */;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3851,7 +3729,9 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     sel,
     owner
   } = vnode;
-  const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+  const {
+    createCustomElement
+  } = renderer;
   /**
    * Note: if the upgradable constructor does not expect, or throw when we new it
    * with a callback as the first argument, we could implement a more advanced
@@ -3860,10 +3740,25 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
    */
 
   let vm;
-  const elm = new UpgradableConstructor(elm => {
+
+  const upgradeCallback = elm => {
     // the custom element from the registry is expecting an upgrade callback
     vm = createViewModelHook(elm, vnode, renderer);
-  });
+  };
+
+  const connectedCallback = elm => {
+    if (features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      connectRootElement(elm);
+    }
+  };
+
+  const disconnectedCallback = elm => {
+    if (features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      disconnectRootElement(elm);
+    }
+  };
+
+  const elm = createCustomElement(sel, upgradeCallback, connectedCallback, disconnectedCallback);
   vnode.elm = elm;
   vnode.vm = vm;
   linkNodeToShadow(elm, owner, renderer);
@@ -3871,8 +3766,6 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
 
   if (vm) {
     allocateChildren(vnode, vm);
-  } else if (vnode.ctor !== UpgradableConstructor) {
-    throw new TypeError(`Incorrect Component Constructor`);
   }
 
   patchElementPropsAndAttrs$1(null, vnode, renderer);
@@ -4177,7 +4070,7 @@ function allocateChildren(vnode, vm) {
   /* RenderMode.Light */
   ) {
     // slow path
-    allocateInSlot(vm, children); // save the allocated children in case this vnode is reused.
+    allocateInSlot(vm, children, vnode.owner); // save the allocated children in case this vnode is reused.
 
     vnode.aChildren = children; // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
 
@@ -4213,13 +4106,19 @@ function createViewModelHook(elm, vnode, renderer) {
   return vm;
 }
 
-function allocateInSlot(vm, children) {
-  var _a;
+function allocateInSlot(vm, children, owner) {
+  var _a, _b;
 
   const {
-    cmpSlots: oldSlots
+    cmpSlots: {
+      slotAssignments: oldSlotsMapping
+    }
   } = vm;
-  const cmpSlots = vm.cmpSlots = shared.create(null);
+  const cmpSlotsMapping = shared.create(null);
+  vm.cmpSlots = {
+    owner,
+    slotAssignments: cmpSlotsMapping
+  };
 
   for (let i = 0, len = children.length; i < len; i += 1) {
     const vnode = children[i];
@@ -4231,19 +4130,21 @@ function allocateInSlot(vm, children) {
     let slotName = '';
 
     if (isVBaseElement(vnode)) {
-      slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
+      slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
+    } else if (isVScopedSlotFragment(vnode)) {
+      slotName = vnode.slotName;
     }
 
-    const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || [];
+    const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
     shared.ArrayPush.call(vnodes, vnode);
   }
 
   if (shared.isFalse(vm.isDirty)) {
     // We need to determine if the old allocation is really different from the new one
     // and mark the vm as dirty
-    const oldKeys = shared.keys(oldSlots);
+    const oldKeys = shared.keys(oldSlotsMapping);
 
-    if (oldKeys.length !== shared.keys(cmpSlots).length) {
+    if (oldKeys.length !== shared.keys(cmpSlotsMapping).length) {
       markComponentAsDirty(vm);
       return;
     }
@@ -4251,15 +4152,15 @@ function allocateInSlot(vm, children) {
     for (let i = 0, len = oldKeys.length; i < len; i += 1) {
       const key = oldKeys[i];
 
-      if (shared.isUndefined(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
+      if (shared.isUndefined(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
         markComponentAsDirty(vm);
         return;
       }
 
-      const oldVNodes = oldSlots[key];
-      const vnodes = cmpSlots[key];
+      const oldVNodes = oldSlotsMapping[key];
+      const vnodes = cmpSlotsMapping[key];
 
-      for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
+      for (let j = 0, a = cmpSlotsMapping[key].length; j < a; j += 1) {
         if (oldVNodes[j] !== vnodes[j]) {
           markComponentAsDirty(vm);
           return;
@@ -4459,6 +4360,18 @@ const SymbolIterator = Symbol.iterator;
 function addVNodeToChildLWC(vnode) {
     shared.ArrayPush.call(getVMBeingRendered().velements, vnode);
 }
+// [s]coped [s]lot [f]actory
+function ssf(slotName, factory) {
+    return {
+        type: 6 /* VNodeType.ScopedSlotFragment */,
+        factory,
+        owner: getVMBeingRendered(),
+        elm: undefined,
+        sel: undefined,
+        key: undefined,
+        slotName,
+    };
+}
 // [st]atic node
 function st(fragment, key) {
     return {
@@ -4542,9 +4455,31 @@ function s(slotName, data, children, slotset) {
         shared.assert.isTrue(shared.isArray(children), `h() 3rd argument children must be an array.`);
     }
     if (!shared.isUndefined(slotset) &&
-        !shared.isUndefined(slotset[slotName]) &&
-        slotset[slotName].length !== 0) {
-        children = slotset[slotName];
+        !shared.isUndefined(slotset.slotAssignments) &&
+        !shared.isUndefined(slotset.slotAssignments[slotName]) &&
+        slotset.slotAssignments[slotName].length !== 0) {
+        children = slotset.slotAssignments[slotName].reduce((acc, vnode) => {
+            // If the passed slot content is factory, evaluate it and use the produced vnodes
+            if (vnode && isVScopedSlotFragment(vnode)) {
+                const vmBeingRenderedInception = getVMBeingRendered();
+                let children = [];
+                // Evaluate in the scope of the slot content's owner
+                // if a slotset is provided, there will always be an owner. The only case where owner is
+                // undefined is for root components, but root components cannot accept slotted content
+                setVMBeingRendered(slotset.owner);
+                try {
+                    children = vnode.factory(data.slotData);
+                }
+                finally {
+                    setVMBeingRendered(vmBeingRenderedInception);
+                }
+                return shared.ArrayConcat.call(acc, children);
+            }
+            else {
+                // If the slot content is a static list of child nodes provided by the parent, nothing to do
+                return shared.ArrayConcat.call(acc, vnode);
+            }
+        }, []);
     }
     const vmBeingRendered = getVMBeingRendered();
     const { renderMode, shadowMode } = vmBeingRendered;
@@ -4864,6 +4799,7 @@ const api = shared.freeze({
     gid,
     fid,
     shc,
+    ssf,
 });
 
 /*
@@ -5000,9 +4936,9 @@ function validateSlots(vm, html) {
     }
     const { cmpSlots } = vm;
     const { slots = EmptyArray } = html;
-    for (const slotName in cmpSlots) {
+    for (const slotName in cmpSlots.slotAssignments) {
         // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
-        shared.assert.isTrue(shared.isArray(cmpSlots[slotName]), `Slots can only be set to an array, instead received ${shared.toString(cmpSlots[slotName])} for slot "${slotName}" in ${vm}.`);
+        shared.assert.isTrue(shared.isArray(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${shared.toString(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
         if (slotName !== '' && shared.ArrayIndexOf.call(slots, slotName) === -1) {
             // TODO [#1297]: this should never really happen because the compiler should always validate
             // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
@@ -5499,7 +5435,9 @@ function createVM(elm, ctor, renderer, options) {
     velements: EmptyArray,
     cmpProps: shared.create(null),
     cmpFields: shared.create(null),
-    cmpSlots: shared.create(null),
+    cmpSlots: {
+      slotAssignments: shared.create(null)
+    },
     oar: shared.create(null),
     cmpTemplate: null,
     hydrated: Boolean(hydrated),
@@ -6654,19 +6592,23 @@ function validateClassAttr(vnode, elm, renderer) {
     //
     // Consequently, hydration mismatches will occur if scoped CSS token classnames
     // are rendered during SSR. This needs to be accounted for when validating.
-    if (scopedToken) {
+    if (!shared.isNull(scopedToken) || !shared.isNull(stylesheetTokenHost)) {
         if (!shared.isUndefined(className)) {
-            className = shared.isNull(stylesheetTokenHost)
-                ? `${scopedToken} ${className}`
-                : `${scopedToken} ${className} ${stylesheetTokenHost}`;
+            // The order of the className should be scopedToken className stylesheetTokenHost
+            const classTokens = [scopedToken, className, stylesheetTokenHost];
+            const classNames = shared.ArrayFilter.call(classTokens, (token) => !shared.isNull(token));
+            className = shared.ArrayJoin.call(classNames, ' ');
         }
         else if (!shared.isUndefined(classMap)) {
-            classMap = Object.assign(Object.assign(Object.assign({}, classMap), { [scopedToken]: true }), (shared.isNull(stylesheetTokenHost) ? {} : { [stylesheetTokenHost]: true }));
+            classMap = Object.assign(Object.assign(Object.assign({}, classMap), (!shared.isNull(scopedToken) ? { [scopedToken]: true } : {})), (!shared.isNull(stylesheetTokenHost) ? { [stylesheetTokenHost]: true } : {}));
         }
         else {
-            className = shared.isNull(stylesheetTokenHost)
-                ? `${scopedToken}`
-                : `${scopedToken} ${stylesheetTokenHost}`;
+            // The order of the className should be scopedToken stylesheetTokenHost
+            const classTokens = [scopedToken, stylesheetTokenHost];
+            const classNames = shared.ArrayFilter.call(classTokens, (token) => !shared.isNull(token));
+            if (classNames.length) {
+                className = shared.ArrayJoin.call(classNames, ' ');
+            }
         }
     }
     let nodesAreCompatible = true;
@@ -6929,7 +6871,6 @@ exports.getAssociatedVMIfPresent = getAssociatedVMIfPresent;
 exports.getComponentConstructor = getComponentConstructor;
 exports.getComponentDef = getComponentDef;
 exports.getComponentHtmlPrototype = getComponentHtmlPrototype;
-exports.getUpgradableConstructor = getUpgradableConstructor;
 exports.hydrateRoot = hydrateRoot;
 exports.isComponentConstructor = isComponentConstructor;
 exports.parseFragment = parseFragment;
@@ -6947,4 +6888,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.25.1 */
+/* version: 2.27.0 */