...
Wrapping the micro frontend in a Shadow DOM
Prefixing all styles. In component-based frameworks, this could be achieved by using scoped styles in the root component (e.g. Scoped styles in Vue ).
The last resort is removing global styles programmatically using the DOM API
Using a framework that is not dependent and does not use global styles
The shell application is using Angular Material and as a consequence the styling theme specified in the shell is global and therefor will affect other Angular micro frontends using Angular Material.
Shell application - Kam-ui
...
It has been tested under the following conditions:
Angular version 1214.2.1612
Angular Material 1214.2.137
With the CSS class mat-typography added on the body tag in index.html
angular-architects/module-federation 1214.53.314
angular-architects/module-federation-tools 1214.53.314
Be aware of routing as described here: Routing
...