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.

[jakearchibald]

Spec'ing this to match Chrome's behaviour, or providing a way to achieve this behaviour, seems essential for declarative shadow DOM.

• Declarative shadow DOM exists so custom elements can render in some meaningful way before JS loads, and to avoid a layout shift when JS loads.
• Custom elements typically need styles within their shadow root to achieve their desired layout.
• Outputting inline styles per instance of a component would massively and needlessly bloat the HTML.

That means we want some way to include styles in the shadow roots:

<custom-whatever>
  <template shadowrootmode="open">
    <link rel="stylesheet" href="custom-whatever-styles.css" />
    …
  </template>
  …
</custom-whatever>

But, if <custom-whatever>'s content renders before custom-whatever-styles.css loads, it's missing the whole point of avoiding a layout shift.

[avandolder]

FWIW, Gecko now has declarative shadow DOM support, and it does not block rendering for stylesheet loads. This does seem like a reasonable change to make, however.