Add a constructor that takes a Response

[tabatkins]

/cc @domenic @rniwa

Ryosuke suggested adding a constructor that just takes a URL, so you can construct a stylesheet as easily as adding a link, like document.loadCSSStyleSheet(...).

I thought that Fetch has a lot of options beyond just the URL, and I didn't want to duplicate those in the CSSStyleSheet() constructor (and keep it consistent as Fetch grows and changes). You can just do fetch(...).then(r=>document.CSSStyleSheet(r.text)) pretty easily.

Domenic pointed to WASM as an example where they have a constructor directly take a Response object, so you can build something from a fetch() response even more easily: document.CSSStyleSheet(fetch(...)).

This sounds good to me.

[calebdwilliams]

Is this technically necessary if CSS Modules gets implemented? That seems like a more intuitive interaction model. Besides, if I'm not mistaken, the right way to use the spec as currently implemented in Chrome would be

const sheet = new CSSStyleSheet();

fetch('url').then(res => sheet.replace(res.text));

someShadowRoot.adoptedStyleSheets = [ sheet ];

Which has the added feature of not blocking the use of the sheet while the resource is being fetched and parsed.

[tabatkins]

Ah, this was written back when constructing a stylesheet was always an async operation, so the fact that taking a response was async as well wasn't a problem.

Now that we're using a real constructor, and thus produce the initial sheet sync, I don't think this makes sense. It would just very slightly shorten the code you produced:

// instead of
fetch('url').then(res => sheet.replace(res.text));
// you could write
sheet.replace(fetch('url'));

And like, that's nice and all, but it's so minor as to probably not be worth it.

I'll go ahead and close this.