Peter Kröner

So, #WebComponents. If we want to share stylesheets between the document and components and we have CSS module scripts... is there any reason to use <link rel="stylesheet"> anymore? Requesting a CSS module script from a blocking script in <head> (and then sharing the sheet between shadow roots and the main document) should be plenty fast, right?

#webdev

Mar 24 at 12:56pmWeb
Show threadPeter Kröner3d ago

Some objections that I can come up with:

- What about the browser's preload scanner? Might be solved with <link rel="modulepreload" as="style" href="sheet.css" />

- Extending from window.BaseClass looks gross. Can be hidden via $ echo "export const BaseClass = window.BaseClass;" > BaseClass.js

Show threadPeter Kröner2d ago
Enlisted @Schepp, the pope of performance himself, to help verify that <link rel="modulepreload"> indeed does the trick (in supporting browsers). If your use case requires JS, ignores Safari, and shares styles between web components and the main document… then you maybe _should_ ditch <link rel="stylesheet">
Show threadwestbrook3d ago
@sir_pepe I don't think there's something inherently _wrong_ with this approach. However, there is _something_ to be said about the no script story of your content delivery. While it can feel overly dogmatic, the idea that JS _might_ not be available is something that should be taken into account to some degree. Whether this is the point at which that should be taken into account has much more to do with what it right for _your_ users than what is right for _apps at large_.
Show threadPeter Kröner3d ago
@westbrook 100%, this only applies at the intersection of "this requires JS to function" and "we care about performance"... which may very well not exist in the wild 🫠
Show threadOlivier Stuker (he/him)1d ago

@sir_pepe damn, import `with {type: 'css'}` wasn't a thing when I started my private side project with web components*. Still not 100% supported, but it's definitely something I'll look into.

*) Either that project is going on super slow or web technologies are developing super fast...