Handle FOUC when rendering lit components with external CSS
Categories
(Toolkit :: UI Widgets, defect, P3)
Tracking
()
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:
- Move the CSS into the component using Constructible Stylesheets.
- Rename the .css to .css.mjs and export a Constructible Stylesheet.
- Wait for CSS Modules and import the Constructible Stylesheet with
import styles from "my-component.css"
- Some other platform-type change to synchronously load the CSS style
Reporter | ||
Updated•1 year ago
|
Updated•1 year ago
|
Assignee | ||
Comment 1•1 year ago
|
||
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.
Updated•1 year ago
|
Assignee | ||
Comment 2•1 year ago
|
||
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
Assignee | ||
Comment 3•1 year ago
|
||
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
Comment 4•1 year ago
|
||
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?
Comment 5•1 year ago
|
||
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
Comment 7•1 year ago
•
|
||
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
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
Updated•1 year ago
|
Comment 9•1 year ago
|
||
bugherder |
Updated•1 year ago
|
Updated•1 year ago
|
Updated•1 year ago
|
Updated•1 year ago
|
Updated•1 year ago
|
Updated•1 month ago
|
Description
•