How does this avoid flash of unstyled content (FOUC)?

[matthewmueller]

Hey there, really interesting library. I was surprised about how little code there was!

Curious how this works:

This uses MutationObserver to monitor the DOM, and the moment a <style> tag is seen, it scopes the styles to whatever the parent element is. No flashing or popping.

Do MutationObserver observers always kick in before styling is applied? I would have expected a race between the mutation observers firing and the styles being applied, where sometimes mutation observers win, sometimes <style> wins

[tobimori]

I guess it depends on when do you load your JS. HTML is parsed line by line, and if the JS is executed before the stylesheets in the DOM (by including in the head) the Mutation Observer is ran every time a new line is parsed.

[gnat]

Do MutationObserver observers always kick in before styling is applied?

Practical point of view: Yes.

Technical point of view: Almost always but maybe not if the PC is ancient/shit.

Explanation

We avoid flashing, popping because MutationObserver + css-scope-inline runs much much faster than 1 frame of rendering, which is 99.9% plenty of time for us to run without issue alongside the DOM.

Technically MutationObserver is asynchronous (depends on browser implementation), so it's impossible to guarantee zero FOUC all of the time if the machine is very slow as it is a race (...but in most cases it can be guaranteed).

Any inline <style> not using me should be synchronous (again, depends on browser implementation, even this isn't 100% guaranteed).

Inline styles using me are invalid until css-scope-inline runs.

Hope that helps clear up any misconceptions.

In the extreme rare occurrence of a 1 frame flash, it's just going to be perceived by the user as typical DOM loading-- you'll never see half second of flashing.