fix(platform/router-outlet): ensure transparent router-outlet if empty

An iframe is transparent only if the embedded content has the same color scheme as the embedding document.

An empty router-outlet loads the 'about:blank' page. This page has the user's preferred OS color scheme, which may be different from the application's color scheme, making the iframe opaque. Therefore, we hide the iframe to make the router-outlet transparent again.

More information about iframe transparency:
- w3c/csswg-drafts#4772 (comment)
- https://fvsch.com/transparent-iframes

projects/scion/microfrontend-platform.e2e/src/router-outlet/router-outlet.e2e-spec.ts

@@ -1910,6 +1910,53 @@ test.describe('RouterOutlet', () => {
     // expect the secondary router outlet to be navigated
     await expect(secondaryRouterOutletPO).toHaveRouterOutletUrl(getPageUrl({origin: TestingAppOrigins.APP_1, path: Microfrontend2PagePO.PATH}));
   });
+
+  test('should hide iframe if empty', async ({testingAppPO}) => {
+    const pagePOs = await testingAppPO.navigateTo({
+      router: OutletRouterPagePO,
+      routerOutlet: RouterOutletPagePO,
+    });
+
+    const routerPO = pagePOs.get<OutletRouterPagePO>('router');
+    const routerOutletPO = pagePOs.get<RouterOutletPagePO>('routerOutlet');
+
+    // Expect iframe to be invisible if not having performed a navigation yet
+    await expect(routerOutletPO.iframeLocator).not.toBeVisible();
+
+    // WHEN: Setting the outlet name
+    await routerOutletPO.enterOutletName('testee');
+    await routerOutletPO.clickApply();
+    // THEN: Expect iframe to still be invisible
+    await expect(routerOutletPO.iframeLocator).not.toBeVisible();
+
+    // WHEN: Navigating to a microfrontend
+    await routerPO.enterOutletName('testee');
+    await routerPO.enterUrl('/test-pages/microfrontend-1-test-page');
+    await routerPO.clickNavigate();
+    // THEN: Expect iframe to be visible
+    await expect(routerOutletPO.iframeLocator).toBeVisible();
+
+    // WHEN: Clearing the outlet
+    await routerPO.enterOutletName('testee');
+    await routerPO.enterUrl(null);
+    await routerPO.clickNavigate();
+    // THEN: Expect iframe to be invisible
+    await expect(routerOutletPO.iframeLocator).not.toBeVisible();
+
+    // WHEN: Navigating to a microfrontend
+    await routerPO.enterOutletName('testee');
+    await routerPO.enterUrl('/test-pages/microfrontend-1-test-page');
+    await routerPO.clickNavigate();
+    // THEN: Expect iframe to be visible
+    await expect(routerOutletPO.iframeLocator).toBeVisible();
+
+    // WHEN: Navigating to 'about:bank'
+    await routerPO.enterOutletName('testee');
+    await routerPO.enterUrl('about:blank');
+    await routerPO.clickNavigate();
+    // THEN: Expect iframe to be invisible
+    await expect(routerOutletPO.iframeLocator).not.toBeVisible();
+  });
 });
 
 function getPageUrl(parts: {origin: string; path: string}): string {

projects/scion/microfrontend-platform/src/lib/client/router-outlet/router-outlet.element.ts

@@ -39,6 +39,21 @@ const HTML_TEMPLATE = `
       border: none;
       margin: 0;
     }
+    
+    /* Ensure transparent router-outlet if empty.
+     *
+     * An iframe is transparent only if the embedded content has the same color scheme as the embedding document.
+     * An empty router-outlet loads the 'about:blank' page. This page has the user's preferred OS color scheme,
+     * which may be different from the application's color scheme, making the iframe opaque. Therefore, we hide
+     * the iframe to make the router-outlet transparent again.
+     *
+     * More information about iframe transparency:
+     * - https://github.com/w3c/csswg-drafts/issues/4772#issuecomment-591553929
+     * - https://fvsch.com/transparent-iframes
+     */
+    :host-context(.sci-empty) iframe {
+      display: none;
+    }
 
     div[part="splash"] {
       position: absolute;