Re: [w3ctag/design-reviews] Question: should `shadowrootadoptedstylesheets` perform a fetch? (Issue #1195)

sorvell left a comment (w3ctag/design-reviews#1195)

> @jakearchibald, @keithamus, and others, do you have any sense of whether it would help to define <link specifier> for importing/adopting this kind of sheet?

I, for one, was about to suggest the exact same thing. It makes sense to me and paves the way to more mappings of html resources to the module map (e.g. /drool inline module scripts). 

I think I'd be ok if the `shadowrootadoptedstylesheets` attribute *only* took specifiers and using a remote resource meant putting a specifier on `<link>` before the `<template>`.

At least Firefox and Chrome [have](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources), I believe, the ideal rendering performance with respect to loading and rendering of `<link>`'s. Placing the link *before* the template should ensure it's loaded (maybe not in webkit) before the shadowRoot is created and therefore is available. The page can stream and render as needed before that.

One obvious objection to organizing Shadow DOM styles for remote fetching is the granularity mismatch. Ideally you'd bundle a bunch of styles to justify the cost of the request but only apply a subset to any given Shadow DOM. Modern frameworks seem to be [landing on a hybrid approach](https://claude.ai/public/artifacts/8d41757e-021a-47f1-ba53-dfba80046705) for critical CSS where it's inlined to a certain size threshold before creating a bundle to load/cache. To do this with `link` we will likely want `@sheet`, but until then, we can, at the least do this with `:host(element-name) { ... }`.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/1195#issuecomment-3930688984
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/1195/3930688984@github.com>