Reports

Blacklisted phrase (1): did not work
Long answer (-1):
Has code block (-0.5):
Me too answer (2.5): have the same problem
High reputation (-1):

If you have that problem with an angular elements based microfrontend with ViewEncapsulation.ShadowDom set you maybe have the same problem as I had:

Why it did not work
My dive into the code showed that

at runtime the used material theme is added as 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 tag in a 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);
}

79163447