feat(runtime): provide a root

apps/runtime-demo/3005-runtime-host/src/App.tsx

@@ -4,6 +4,7 @@ import { Link, Routes, Route, BrowserRouter } from 'react-router-dom';
 import Root from './Root';
 import Remote1 from './Remote1';
 import Remote2 from './Remote2';
+import Remote3 from './Remote3';
 
 const App = () => (
   <BrowserRouter>
@@ -18,11 +19,15 @@ const App = () => (
       <li>
         <Link to={'/remote2'}>remote2</Link>
       </li>
+      <li>
+        <Link to={'/remote3'}>remote3</Link>
+      </li>
     </ul>
     <Routes>
       <Route path="/" element={<Root />} />
       <Route path="/remote1" element={<Remote1 />} />
       <Route path="/remote2" element={<Remote2 />} />
+      <Route path="/remote3" element={<Remote3 />} />
     </Routes>
   </BrowserRouter>
 );

apps/runtime-demo/3005-runtime-host/src/Remote3.tsx

@@ -0,0 +1,28 @@
+import React, { Suspense, lazy } from 'react';
+import { createRoot } from 'react-dom/client';
+import { loadRemote } from '@module-federation/enhanced/runtime';
+
+class CustomElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+  async connectedCallback() {
+    if (!this.shadowRoot) return;
+
+    const module = await loadRemote('dynamic-remote/ButtonOldAnt', {
+      //@ts-ignore
+      root: this.shadowRoot,
+    });
+    //@ts-ignore
+    createRoot(this.shadowRoot).render(React.createElement(module.default));
+  }
+}
+
+customElements.define('custom-element', CustomElement);
+
+function DynamicRemoteButton() {
+  return React.createElement('custom-element');
+}
+
+export default DynamicRemoteButton;

packages/runtime-core/src/plugins/snapshot/index.ts

@@ -41,7 +41,7 @@ export function snapshotPlugin(): FederationRuntimePlugin {
   return {
     name: 'snapshot-plugin',
     async afterResolve(args) {
-      const { remote, pkgNameOrAlias, expose, origin, remoteInfo } = args;
+      const { remote, pkgNameOrAlias, expose, origin, remoteInfo, root } = args;
 
       if (!isRemoteInfoWithEntry(remote) || !isPureRemoteEntry(remote)) {
         const { remoteSnapshot, globalSnapshot } =
@@ -73,7 +73,7 @@ export function snapshotPlugin(): FederationRuntimePlugin {
           );
 
         if (assets) {
-          preloadAssets(remoteInfo, origin, assets, false);
+          preloadAssets(remoteInfo, origin, assets, false, root);
         }
 
         return {

packages/runtime-core/src/remote/index.ts

@@ -57,6 +57,7 @@ export interface LoadRemoteMatch {
   origin: FederationHost;
   remoteInfo: RemoteInfo;
   remoteSnapshot?: ModuleInfo;
+  root?: HTMLElement;
 }
 
 export class RemoteHandler {
@@ -197,7 +198,7 @@ export class RemoteHandler {
   // eslint-disable-next-line @typescript-eslint/member-ordering
   async loadRemote<T>(
     id: string,
-    options?: { loadFactory?: boolean; from: CallFrom },
+    options?: { loadFactory?: boolean; from: CallFrom; root?: HTMLElement },
   ): Promise<T | null> {
     const { host } = this;
     try {
@@ -214,6 +215,7 @@ export class RemoteHandler {
       const { module, moduleOptions, remoteMatchInfo } =
         await this.getRemoteModuleAndOptions({
           id,
+          root: options?.root,
         });
       const {
         pkgNameOrAlias,
@@ -314,7 +316,10 @@ export class RemoteHandler {
     });
   }
 
-  async getRemoteModuleAndOptions(options: { id: string }): Promise<{
+  async getRemoteModuleAndOptions(options: {
+    id: string;
+    root?: HTMLElement;
+  }): Promise<{
     module: Module;
     moduleOptions: ModuleOptions;
     remoteMatchInfo: LoadRemoteMatch;
@@ -371,6 +376,7 @@ export class RemoteHandler {
         options: host.options,
         origin: host,
         remoteInfo,
+        root: options.root,
       });
 
     const { remote, expose } = matchInfo;

packages/runtime-core/src/utils/preload.ts

@@ -70,6 +70,7 @@ export function preloadAssets(
   assets: PreloadAssets,
   // It is used to distinguish preload from load remote parallel loading
   useLinkPreload = true,
+  root: HTMLElement = document.head,
 ): void {
   const { cssAssets, jsAssetsWithoutEntry, entryAssets } = assets;
 
@@ -99,6 +100,7 @@ export function preloadAssets(
       };
       cssAssets.forEach((cssUrl) => {
         const { link: cssEl, needAttach } = createLink({
+          root,
           url: cssUrl,
           cb: () => {
             // noop
@@ -116,7 +118,7 @@ export function preloadAssets(
           },
         });
 
-        needAttach && document.head.appendChild(cssEl);
+        needAttach && root.appendChild(cssEl);
       });
     } else {
       const defaultAttrs = {
@@ -125,6 +127,7 @@ export function preloadAssets(
       };
       cssAssets.forEach((cssUrl) => {
         const { link: cssEl, needAttach } = createLink({
+          root,
           url: cssUrl,
           cb: () => {
             // noop
@@ -143,7 +146,7 @@ export function preloadAssets(
           needDeleteLink: false,
         });
 
-        needAttach && document.head.appendChild(cssEl);
+        needAttach && root.appendChild(cssEl);
       });
     }
 
@@ -154,6 +157,7 @@ export function preloadAssets(
       };
       jsAssetsWithoutEntry.forEach((jsUrl) => {
         const { link: linkEl, needAttach } = createLink({
+          root: document.head,
           url: jsUrl,
           cb: () => {
             // noop

packages/sdk/src/dom.ts

@@ -136,6 +136,7 @@ export function createScript(info: {
 }
 
 export function createLink(info: {
+  root: HTMLElement;
   url: string;
   cb?: (value: void | PromiseLike<void>) => void;
   onErrorCallback?: (error: Error) => void;
@@ -151,7 +152,7 @@ export function createLink(info: {
   // Retrieve the existing script element by its src attribute
   let link: HTMLLinkElement | null = null;
   let needAttach = true;
-  const links = document.getElementsByTagName('link');
+  const links = info.root.querySelectorAll('link');
   for (let i = 0; i < links.length; i++) {
     const l = links[i];
     const linkHref = l.getAttribute('href');