Automatically ignore native-shadow-only CSS files in synthetic shadow #4709

nolanlawson · 2024-10-25T22:39:11Z

We introduced the experimental disableSyntheticShadowSupport flag as an optimization for compiled CSS to vastly reduce the bundle size: #3229

Some of our downstreams are already using this to conditionally turn on the flag for filenames that match a certain pattern (e.g. foo.my-pattern.native.css). You can do this e.g. in a Rollup plugin.

However, this creates a conundrum. What if your component supports both native and synthetic shadow? Rendering those native-only styles in synthetic mode is not only wasteful from a perf perspective, but it's also incorrect since unscoped CSS selectors are being used in the document <head>.

As a solution, the LWC engine could mark native-only stylesheets as such, e.g.:

function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
  // ...
}
stylesheet.$nativeOnly$ = true

Then the engine could use this $nativeOnly$ flag and, if synthetic shadow is being rendered, treat the stylesheet as a no-op (i.e. returning the empty string).

/cc @gonzalocordero

The text was updated successfully, but these errors were encountered:

nolanlawson added the enhancement label Oct 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automatically ignore native-shadow-only CSS files in synthetic shadow #4709

Automatically ignore native-shadow-only CSS files in synthetic shadow #4709

nolanlawson commented Oct 25, 2024 •

edited

Loading

Automatically ignore native-shadow-only CSS files in synthetic shadow #4709

Automatically ignore native-shadow-only CSS files in synthetic shadow #4709

Comments

nolanlawson commented Oct 25, 2024 • edited Loading

nolanlawson commented Oct 25, 2024 •

edited

Loading