Closed Bug 1799200 Opened 1 year ago Closed 1 year ago

Handle FOUC when rendering lit components with external CSS

Categories

(Toolkit :: UI Widgets, defect, P3)

defect

Tracking

()

RESOLVED FIXED
109 Branch
Tracking Status
firefox109 --- fixed

People

(Reporter: mstriemer, Assigned: hjones)

References

(Blocks 1 open bug)

Details

(Whiteboard: [recomp])

Attachments

(1 file, 3 obsolete files)

We're seeing a flash of unstyled content (FOUC) in the fx-toggle when included in the about:addons page (bug 1798335). This is normally solved in lit by using Constructible Stylesheets, but we have opted to use external stylesheets.

We should investigate a solution for this. There are several options:

  1. Move the CSS into the component using Constructible Stylesheets.
  2. Rename the .css to .css.mjs and export a Constructible Stylesheet.
  3. Wait for CSS Modules and import the Constructible Stylesheet with import styles from "my-component.css"
  4. Some other platform-type change to synchronously load the CSS style
Whiteboard: [fidefe-reusable-components-ms1]

This patch provides a (probably temporary) fix for the FOUC issue that occurs when using external stylesheets with Lit based web components. One alternative would be to use Lit's css helper to creat a stylesheet, but this might be contentious as it would involve either moving the styles into the component or into a .css.mjs file.

Assignee: nobody → hjones
Status: NEW → ASSIGNED

Our initial plan was to use external stylesheets for styling our Lit based elements. However this approach is not recommended by the Lit developers, and we quickly ran into the FOUC issue mentioned here: https://lit.dev/docs/components/styles/#external-stylesheet

This patch switches the CSS file for the toggle to be a .css.mjs file that exports a tagged css template literal. We then use that as the value for a static styles field on the toggle class. More information on this approach recommended by Lit can be found here: https://lit.dev/docs/components/styles/#add-styles

In the long term we may be able to find a cleaner solution using CSS module scripts, but those haven't been implemented in Firefox yet: https://bugzilla.mozilla.org/show_bug.cgi?id=1720570

Assuming we want to use Lit's css function as an interim solution for the FOUC styling issue we should ensure that this is easy to incorporate into the structure of our new components.

To test this you can run ./mach addwidget moz-${something}

Depends on D163886

FWIW, we could in the interim sync-load some of the chrome files. We do this already for UA widgets like the video controls (link to the code).

Would be great not to re-invent the wheel?

This reuses the same codepath that we use for video controls, so that
the browser chrome can load external styles without FOUC.

Loading external styles as compared to internal styles is preferable,
because they can be shared across documents easily.

In the future, I think the idea is that the front-end would use CSS
modules, but meanwhile this should allow them to get along without
adding hacks to their code.

Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c34fb10e0a9f
Sync-load <link rel=stylesheet> on chrome documents' shadow trees. r=smaug

Backed out for causing mochitest failures on SharedSubResourceCache.h

  • Backout link
  • Push with failures
  • Failure Log
  • Failure line: Assertion failure: entry.GetData().Expired() || aValue.Loader().ShouldBypassCache() (Overriding existing complete entry?), at /builds/worker/workspace/obj-build/dist/include/mozilla/SharedSubResourceCache.h:368
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/933af40968dc
Sync-load <link rel=stylesheet> on chrome documents' shadow trees. r=smaug
Flags: needinfo?(emilio)
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 109 Branch
Attachment #9305875 - Attachment description: Bug 1799200 - fix FOUC by preloading stylesheets r=mstriemer,tgiles → WIP: Bug 1799200 - fix FOUC by preloading stylesheets r=mstriemer,tgiles
Attachment #9305875 - Attachment description: WIP: Bug 1799200 - fix FOUC by preloading stylesheets r=mstriemer,tgiles → Bug 1799200 - fix FOUC by preloading stylesheets r=mstriemer,tgiles
Attachment #9306771 - Attachment is obsolete: true
Attachment #9306772 - Attachment is obsolete: true
Attachment #9305875 - Attachment is obsolete: true
Whiteboard: [fidefe-reusable-components-ms1] → [recomp]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: