[akst]

I don't know I've encountered this same issue, but I've seen cases where the same stylesheet would be fetched multiple times which is quite annoying. I had to go out of my way to setup something to handle this.

Basically in my own render DSL like, I do this:

    import { customElement, define, shadow } from '...';
    
    export const ExampleInput = define((props, ctx) => {
      const sheet = ctx.useRemoteStyleSheet(styleSheetUrl);
      const onInput = ctx.useHandler(...);
      const onKeyDown = ctx.useHandler(...);
      // ...
    
      const field = input
        .css({ opacity: sheet.loaded ? '1' : '0' })
        .on(onInput, onKeyDown)
        .void({ type: 'text', value: text, disabled, className });
    
      return customElement('akst-input-number')
        .shadow(shadow.css(sheet).c(field))
        .void({ className: hostClassName });
    });

There's a bit going here, and my terrible method names probably don't help, but `ctx.useRemoteStyleSheet` internally checks if the stylesheet has been fetched is the process of being fetched, returns an object which contains the load state allowing the component to handle its unloaded state. But this might avoid that specific issue of 100+ css requests, I still get quite a few just not that many.

Before that I had a more manual process where fetches had to go through a style sheet loading "service" (or a light stateful wrapper over one). This was before I effectively made the above react like clone. Now that just happens behind the scenes, instead of all the nasty wiring I had with the web component class.