如何跨Web组件共享库

Question

我利用自定义元素开始了一个微前端项目。 我正在寻找一种方法来共享应用程序的所有部分之间的依赖关系。

我想知道如何使用Material-ui库做到这一点。 例如，可以将库附加到窗口对象，并从自定义元素（Web组件）内部访问它。

我在这里看到的问题是材料ui作为npm模块存在，我还没有找到通过script标记加载它的选项。

自定义元素通过加载 http import 这意味着在使用window库填充material-ui对象之前将加载它们。

Answer 1

使用＆＃34; import＆＃34;用于添加依赖库。例如，如果您想要材质UI按钮，那么

import FlatButton from 'material-ui/FlatButton';

关注：http://www.material-ui.com/#/get-started/usage

- 帮助：）

Answer 2

我找到了一种共享库的方法，例如UI库，例如Material-UI，并将它们放在全局范围（window对象）上。

然后，包含在合成图层中的web component（custom element）可以从继承自其包含的上下文的窗口对象中读取它。

当只需要功能时，可以很容易地使用这种方法。对于UI库，如果有样式，则必须注意如果在Web组件上打开或不打开阴影dom，并且如果它已经打开则关闭。

这是Web组件的影子dom样式范围功能，这意味着可以简单地从父级继承样式。