将角度材料添加到基于角度元素的微前端

Question

我有一个 Angular WebComponent，是在 @Angular/elements 的帮助下构建的。 Web组件已经在我的网站上运行了几个月，所以大部分代码、部署和加载都可以。

问题
我目前正在尝试向该网络组件添加角度材质。在开发过程中，一切工作正常，但当我尝试将其添加到我的页面时，材质组件的样式不正确。 我想我已经将问题缩小到我使用的预建材质主题 (

@angular/material/prebuilt-themes/azure-blue.css

)。

在该文件中，为

html

元素定义了很多 css 变量。

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

这些变量随后用于设置角度材质组件的样式（例如垫子按钮）。

但是Web组件的CSS（包括该主题的CSS）添加到我的Web组件的shadow root

内部的

<style>块中。 我猜问题是，影子根内的代码无法访问页面的 html 元素。

知道如何解决这个问题吗？不幸的是，我没有找到解释该部分的操作方法/教程。

Answer 1

通过在我的应用程序的根组件中添加一个 div 来解决它，它包装了所有内容。

<div id="mfe-container">
   ...everything that was in the app.component.html before...
</div>

我现在也使用自己的主题（无论如何，使用预构建的主题都是临时解决方案）。我没有将主题包含在

html

元素中，而是将其包含在 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);
}

我不知道如何解决预构建主题的问题（因为它定义了元素的变量）。如果我的解决方案激励您在没有自定义主题的情况下解决它，请将其添加为答案或评论。在可能的情况下，我计划无论如何添加一个自定义主题。 如果这个解决方案激励您解决同样的问题