Add angular material to an angular elements based microfrontend

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.

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 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