@lwc/engine-core 8.6.0 → 8.7.0

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2024 Salesforce, Inc.
  */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, seal, create, isAPIFeatureEnabled, isFunction as isFunction$1, keys, ArrayFilter, isObject, isArray as isArray$1, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertySymbols as getOwnPropertySymbols$1, toString as toString$1, isString, ArrayIndexOf, ArrayPop, isFalse, isTrustedSignal, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, assert, freeze, KEY__SYNTHETIC_MODE, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, ArraySplice, flattenStylesheets, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, sanitizeHtmlContent, StringTrim, ArraySort, ArrayFrom, htmlEscape, StringCharAt, ArrayUnshift, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, StringSplit, parseStyleText, arrayEvery, ArrayCopyWithin, ArrayFill, ArrayReverse, ArrayShift } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, seal, create, isAPIFeatureEnabled, isFunction as isFunction$1, keys, ArrayFilter, isObject, isArray as isArray$1, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertySymbols as getOwnPropertySymbols$1, toString as toString$1, isString, ArrayIndexOf, ArrayPop, isFalse, isTrustedSignal, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, assert, freeze, KEY__SYNTHETIC_MODE, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, isTrue, KEY__SCOPED_CSS, KEY__NATIVE_ONLY_CSS, ArraySplice, flattenStylesheets, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, sanitizeHtmlContent, StringTrim, ArraySort, ArrayFrom, htmlEscape, StringCharAt, LOWEST_API_VERSION, ArrayUnshift, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, StringSplit, parseStyleText, arrayEvery, ArrayCopyWithin, ArrayFill, ArrayReverse, ArrayShift } from '@lwc/shared';
 export { setHooks, setTrustedSignalSet } from '@lwc/shared';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -3197,29 +3197,29 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
                 // the stylesheet, while internally, we have a replacement for it.
                 stylesheet = getStyleOrSwappedStyle(stylesheet);
             }
-            const isScopedCss = stylesheet[KEY__SCOPED_CSS];
+            const isScopedCss = isTrue(stylesheet[KEY__SCOPED_CSS]);
+            const isNativeOnlyCss = isTrue(stylesheet[KEY__NATIVE_ONLY_CSS]);
+            const { renderMode, shadowMode } = vm;
             if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS &&
                 !isScopedCss &&
-                vm.renderMode === 0 /* RenderMode.Light */) {
+                renderMode === 0 /* RenderMode.Light */) {
                 logError('Unscoped CSS is not supported in Light DOM in this environment. Please use scoped CSS ' +
                     '(*.scoped.css) instead of unscoped CSS (*.css). See also: https://sfdc.co/scoped-styles-light-dom');
                 continue;
             }
             // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
             const scopeToken = isScopedCss ||
-                (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
+                (shadowMode === 1 /* ShadowMode.Synthetic */ && renderMode === 1 /* RenderMode.Shadow */)
                 ? stylesheetToken
                 : undefined;
             // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
             // native shadow DOM. Synthetic shadow DOM never uses `:host`.
-            const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
-                ? !isScopedCss
-                : vm.shadowMode === 0 /* ShadowMode.Native */;
+            const useActualHostSelector = renderMode === 0 /* RenderMode.Light */ ? !isScopedCss : shadowMode === 0 /* ShadowMode.Native */;
             // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
             // we use an attribute selector on the host to simulate :dir().
             let useNativeDirPseudoclass;
-            if (vm.renderMode === 1 /* RenderMode.Shadow */) {
-                useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
+            if (renderMode === 1 /* RenderMode.Shadow */) {
+                useNativeDirPseudoclass = shadowMode === 0 /* ShadowMode.Native */;
             }
             else {
                 // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
@@ -3230,7 +3230,18 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
                 }
                 useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
             }
-            const cssContent = stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass);
+            let cssContent;
+            if (isNativeOnlyCss &&
+                renderMode === 1 /* RenderMode.Shadow */ &&
+                shadowMode === 1 /* ShadowMode.Synthetic */) {
+                // Native-only (i.e. disableSyntheticShadowSupport) CSS should be ignored entirely
+                // in synthetic shadow. It's fine to use in either native shadow or light DOM, but in
+                // synthetic shadow it wouldn't be scoped properly and so should be ignored.
+                cssContent = '/* ignored native-only CSS */';
+            }
+            else {
+                cssContent = stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass);
+            }
             if (process.env.NODE_ENV !== 'production') {
                 linkStylesheetToCssContentInDevMode(stylesheet, cssContent);
             }
@@ -6441,7 +6452,13 @@ function evaluateTemplate(vm, html) {
             vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
             const { styleVNodes } = context;
             if (!isNull(styleVNodes)) {
-                ArrayUnshift.apply(vnodes, styleVNodes);
+                // It's important here not to mutate the underlying `vnodes` returned from `html.call()`.
+                // The reason for this is because, due to the static content optimization, the vnodes array
+                // may be a static array shared across multiple component instances. E.g. this occurs in the
+                // case of an empty `<template></template>` in a `component.html` file, due to the underlying
+                // children being `[]` (no children). If we append the `<style>` vnode to this array, then the same
+                // array will be reused for every component instance, i.e. whenever `tmpl()` is called.
+                vnodes = [...styleVNodes, ...vnodes];
             }
         });
     }, () => {
@@ -8167,10 +8184,7 @@ const TEMPLATE_PROPS = [
     'legacyStylesheetToken',
 ];
 // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
-const STYLESHEET_PROPS = [
-    // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
-    '$scoped$',
-];
+const STYLESHEET_PROPS = [KEY__SCOPED_CSS, KEY__NATIVE_ONLY_CSS];
 // Via https://www.npmjs.com/package/object-observer
 const ARRAY_MUTATION_METHODS = [
     'pop',
@@ -8415,5 +8429,5 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, computeShadowAndRenderMode, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, runFormAssociatedCallback, runFormDisabledCallback, runFormResetCallback, runFormStateRestoreCallback, sanitizeAttribute, shouldBeFormAssociated, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 8.6.0 */
+/** version: 8.7.0 */
 //# sourceMappingURL=index.js.map