Add angular material to an angular elements based microfrontend

Question

I have an angular webcomponent that I build with the help of @angular/elements. The webcomponent has been working in my website for months, so most of the code, deployment and loading is ok.

The problem
I am currently trying to add angular material to that webcomponent. During development everything works fine but as soon as I try to add it to my page, the styles of the material components are not right. I think I have narrowed the problem to the prebuilt material theme that I use (@angular/material/prebuilt-themes/azure-blue.css).

In that file a lot of css variables are defined for the html element.

html {
  --mat-app-background-color:#faf9fd;
  --mat-app-text-color:#1a1b1f;
  ...
}

Such variables are then used to style angular material components (eg. mat-button).

But the css for the webcomponent (including the css of that theme) are added in a <style> block inside of the shadow root of my webcomponent. I guess the problem is, that the code inside the shadow root has no access to the html element of the page.

Any idea how to tackle that problem? Unfortunately I find no how-to/tutorial that explains that part.

andymel · Accepted Answer · 2025-10-02 16:23:42Z

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 my case I planned to add a custom theme anyway. If this solution inspires you to solve the same

Collectives™ on Stack Overflow

Add angular material to an angular elements based microfrontend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related