Enable microfrontends to apply styles based on their embedding context

[danielwiehl]

Is your feature request related to a problem? Please describe.

The SCION Workbench integrates microfrontends in different places, such as views and overlays. The microfrontends have a different background color depending on where they are embedded. For example, in dark mode, the background color of overlays is slightly brighter, or views in the peripheral area have a different background color than views in the main area.

Describe the solution you'd like

The workbench should provide information about the embedding context to enable microfrontends to apply styles based on their embedding context.

For example, the workbench could set the following CSS classes on the HTML root element of embedded microfrontends:

• Workbench View: workbench-view or workbench-peripheral-view
• Workbench Dialog: workbench-dialog
• Workbench Popup: workbench-popup

Additional context

See SchweizerischeBundesbahnen/scion-microfrontend-platform#250 enabling an application to associate CSS class(es) with a router outlet.