Clarification for <link> behavior in Declarative Shadow DOM

[bakura10]

Hi :),

I'm playing with Declarative shadow dom and found that, if a stylesheet is loaded inside a declarative shadow DOM template, the rendering is blocked. Safari (that also implement declarative shadow DOM) however does not block rendering, which causes a FOUC.

I have been unable to find any note in the specification on which behavior is correct. It would be nice for the stylesheet to be blocking. For now, the only way to avoid the FOUC is to also load the stylesheet at the global scope, but the issue with this approach is that it leaks the style to the main document, which is indesirable.

Thanks.

[annevk]

Looking at https://html.spec.whatwg.org/#contributes-a-script-blocking-style-sheet and #5465 this would constitute a bug in Chromium, though it does seem somewhat logical to update the

The last time the event loop reached step 1, el's root was that Document.

check.

cc @rniwa @mfreed7

[bakura10]

Hi,

Do we have any information on what is the expected behavior, after all? The way Safari does it quite counter-intuitive, it would be very useful to at least have a clarification in the spec here (Chrome still blocks the rendering as of December 2023, which is nice for avoiding CLS issue).

[mfreed7]

I'm playing with Declarative shadow dom and found that, if a stylesheet is loaded inside a declarative shadow DOM template, the rendering is blocked. Safari (that also implement declarative shadow DOM) however does not block rendering, which causes a FOUC.

I think this is likely just inadvertent behavior in Chromium. Having said that, it does sound like a nice bit of behavior, to avoid the FOUC issue as you mentioned. I'd be supportive of a spec change to make that the official behavior.