@lwc/engine-core 8.6.0 → 8.7.0

package/dist/index.cjs.js

@@ -3200,29 +3200,29 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
                 // the stylesheet, while internally, we have a replacement for it.
                 stylesheet = getStyleOrSwappedStyle(stylesheet);
             }
-            const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS];
+            const isScopedCss = shared.isTrue(stylesheet[shared.KEY__SCOPED_CSS]);
+            const isNativeOnlyCss = shared.isTrue(stylesheet[shared.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.
@@ -3233,7 +3233,18 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
                 }
                 useNativeDirPseudoclass = shared.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);
             }
@@ -6444,7 +6455,13 @@ function evaluateTemplate(vm, html) {
             vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
             const { styleVNodes } = context;
             if (!shared.isNull(styleVNodes)) {
-                shared.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];
             }
         });
     }, () => {
@@ -8170,10 +8187,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 = [shared.KEY__SCOPED_CSS, shared.KEY__NATIVE_ONLY_CSS];
 // Via https://www.npmjs.com/package/object-observer
 const ARRAY_MUTATION_METHODS = [
     'pop',
@@ -8468,5 +8482,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.6.0 */
+/** version: 8.7.0 */
 //# sourceMappingURL=index.cjs.js.map