Request: Federation Runtime CSS asset Link insert hook

[hrmcdonald]

Clear and concise description of the problem

Issue

Today the federation runtime seems to handle the loading and insertion of CSS files on our behalf. Even in projects where we specifically remove and re-append the CssExtractRspackPlugin so that we can define our own insert callback, that seems to be ignored since the runtime appears to be loading and inserting CSS asset links instead.

There are many places where this seems to possibly occur today. Essentially anywhere where document.head.appendChild is called to append styles. The location of where JS assets get appended shouldn't really be relevant here though.

Why is this an issue?

In an MFE platform we are building out for our wider organization (with MF 2.0 and the federation runtime which are awsome so far!) we need to make use of Shadow DOMs. Each top-level "micro-app" (which we have defined as anything with it's own route/sub-routes) gets loaded into its own isolated shadow root. We need this for two reasons:

• to isolate different "micro-app" styles from each other.
• to scope custom element registries so different apps can potentially load different major versions of our design system instead of all needing to update at the exact same time.

The issue here is that the Module Federation Runtime is inserting CSS asset links in the head of the document on our behalf. This leads to these styles now affecting everything except the isolated shadow root where it is needed (the opposite of what we want to have happen 😆).

Suggested solution

If we could get some kind of callback hook that we could pass to preloadRemote and hopefully even loadRemote that'd be amazing. Ideally this hook works like the insert function of CssExtractRspackPlugin where it is just called with each link element that needs to be inserted.

This approach would allow us to define the implementation for how link elements get appended to the DOM. In our case this means we could append the Link elements to the shadow root created for a given micro-app, but also possibly cache it to reinsert it across multiple instances of a micro-app being initialized across the platform.

Alternative

There is not a good alternative right now. This would block us from being able to use MF manifests and any value they provide.

Eventually I assume we'd consider trying to develop some custom solution for importing CSS assets that allows us to manage them better at build and run time, but just being able to control the insertion of these seems far more simple.

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[zackarychapple]

Really interesting idea. Would love to chat through this more and bring in some folks for a design discussion. Want to hop on a meetup sometime next week?

[hrmcdonald]

Would love to sync and discuss this some more with anyone @zackarychapple! Unfortunately we're pretty booked up next week. The week after or beyond should be fine though (September onwards). I just joined the module-federation discord and can maybe reach out to you there if that'd be easier to schedule something?

[2heal1]

Thanks your advice , it's very usefule ,so you want mf to provider a hook which likes insert hook to control the css/js element ?
Am i understand right ?

[zackarychapple]

Would love to sync and discuss this some more with anyone @zackarychapple! Unfortunately we're pretty booked up next week. The week after or beyond should be fine though (September onwards). I just joined the module-federation discord and can maybe reach out to you there if that'd be easier to schedule something?

I think i shot you a dm. If not can you shoot me one zmanc on there.

[hrmcdonald]

Thanks your advice , it's very usefule ,so you want mf to provider a hook which likes insert hook to control the css/js element ? Am i understand right ?

Yes, that hook actually isn't even that great because it's run completely out of context from the rest of the page. So being able to pass in some kind of function hook like this alongside a call to loadRemote/preloadRemote would actually even help solve that problem for us.

The goal of the callback would be the same though; be called with any <link> elements that need to be appended to the DOM for some incoming module(s) and then implement the logic that does append them where we want them.

We might even be able to investigate loading those CSS assets JS-side to initialize them as constructed styles sheets so they could be shared across any repeat instances of a "micro-app", but that'd be a separate investigation and not a requirement.

[hrmcdonald]

@2heal1 here is a super simplified example to showcase the basic idea behind the scenario I outlined above. Imagine logic contained inside appContext.mount() is just where something like a React root would be created for a component and hydrated as needed. It's not really important for the ask here.

const mountApp = async (outlet: Element, route: string) => {
  const moduleMetadata = appManifest.get(route);
  const shadowRoot = outlet.shadowRoot ?? outlet.attachShadow({ mode: 'open' });

  const { default: remoteModuleConfig } = await loadRemote(`${moduleMetadata.scope}/${moduleMetadata.module}`, { 
    insertLink: (linkTag: HTMLLinkElement) => shadowRoot.append(linkTag)
  });

  const appContext = remoteModuleConfig();
  await appContext.mount(shadowRoot);
}

The idea here is that the insertLink callback could be passed down into the manifest loader logic and be called where that attaches link asset elements to the DOM instead of always appending them to the document head. This would let us ensure an application's styles are always loaded and scoped inside of its parent shadowRoot instead of outside of it where they cannot affect it at all.

[hrmcdonald]

After looking into the docs a bit more, I do see there is a plugin system for the FederationRuntime we might be able to user here it seems? I see a createScript hook in the docs but no createLink. It seems like there are types for a createLink hook though, is that something public we could tap into here?

[ScriptedAlchemy]

CreateLink is techincally controlled by "webpack runtime" not federation runtime. So this would be something in mini-css runtime module. We may be able to provide some way to patch the function and provide a insert hook though, maybe