Solved it by adding a div in the root component of my app, that wraps everything.
<div id="mfe-container">
...everything that was in the app.component.html before...
</div>
I also use my own theme now (using a prebuilt theme was meant as temporary solution anyway). Instead of including the theme in the `html` element, I include it for the wrapper element from above in my styles.scss
@use '@angular/material' as mat;
// my custom theme file
@use './m3-theme';
// The core mixin must be included exactly once for your application, even if you define multiple themes.
// Including the core mixin multiple times will result in duplicate CSS in your application.
// https://material.angular.io/guide/theming#the-core-mixin
@include mat.core();
#mfe-container {
@include mat.all-component-themes(m3-theme.$light-theme);
}
I don't know how to solve this for a prebuilt theme (as that defines the variables for the <html> element). If my solution inspires you to solve it without custom theme, please add it as answer or comment as well. In may case I planned to add a custom theme anyway.
If this solution inspires you to solve the same
I had the same problem with an **angular elements based microfrontend with `ViewEncapsulation.ShadowDom`** set in the root component.
**Why it did not work**
My dive into the code showed that
- at runtime the used material theme is added as <style> tag inside of the shadow-root
- in the prebuilt themes the variables that style the components are defined for the `<html>` element of the DOM. In a normal SPA everything is inside that html element and so everything has access to those variables
As the shadow DOM is a border between the CSS of the host page and the CSS of the Microfrontend/Webcomponent, everything inside that shadow-root does not have access to css outside of the shadow-root (defining something for the <html> tag in a <style> tag inside the shadow-root does not work).
**My Solution**
I added a div in the root component of my app, that wraps everything.
<div id="mfe-container">
...everything that was in the app.component.html before...
</div>
Instead of including the theme in the `html` element, I include it in that wrapper element in my styles.scss
@use '@angular/material' as mat;
// my custom theme file
@use './m3-theme';
// The core mixin must be included exactly once for your application, even if you define multiple themes.
// Including the core mixin multiple times will result in duplicate CSS in your application.
// https://material.angular.io/guide/theming#the-core-mixin
@include mat.core();
#mfe-container {
@include mat.all-component-themes(m3-theme.$light-theme);
}
