但是现在您可能有个问题如果 和是

RAHIM26

完全不同的系统，那么我们到底该如何将新编写的 Alien 服务集成到 Host 中呢？ 下面是该方法的第二个构建块：Web 组件。 4. 围绕 Alien 服务编写 Web 组件包装器Web 组件包装器是我们集成部分的核心。在我详细介绍这一点之前，有几件事需要记住： 首先，您可以自由地为 Web 组件选择任何您想要的抽象层。您可以选择lit-element、Stencil或最后为您提供 Web 组件的任何内容。然而，我们弗兰肯斯坦迁移所需的 Web 组件非常纯粹（它们只是包装器，仅此而已），我认为为此使用抽象层是多余的。 其次，您的 Web 组件包装器位于主机端。因此，根据您的主机的需求和要求，您必须自行决定是否需要填充 Web 组件。只需检查对我们将依赖的两种技术的支持： 影子 DOM和 自定义元素。 对两者的支持非常相似，随着 Edge 在版本 75 中切换到 Chromium，浏览器中对 Web 组件的本机支持非常令人印象深刻。不过，例如，如果您需要 polyfill 在 IE11 中运行 Web 组件，请查看稳定的 polyfill。

Web Component 是 Alien 服务的纯粹包装器 Web Component 是 Alien 服务的 美国手机号码列表  纯粹包装器。（大预览） 我们的Web组件包装器的主要功能： 使用 Shadow DOM 为新的自定义元素设置样板； 导入我们的 Alien 组件； 在包装器的 Shadow DOM 中渲染 Alien 组件； 导入相关样式并将它们与 Alien 组件本身一起放入 Shadow DOM 中（仅当 Alien 组件需要时）。 作为对此类组件感觉如何的预览，请看一下将 React 组件复制 注意：仔细查看进口。我们不在主机中安装 React，而是从 Alien 的位置导入所有内容及其所有依赖项。在这种情况下，Alien 已作为 a 添加到 Host git submodule ，因此对于 Host 作为子文件夹可见，这使得从 Host 访问其内容成为一项微不足道的任务。在这里，Alien 仍然是一个独立于 Host 的独立实体。它应该解释步骤 ，我们允许从主机访问外星人。 包装器的功能差不多就这些了。在编写 Web 组件、导入 Alien 服务并在 Web 组件中呈现它之后，我们需要用 Web 组件（自带 Alien 服务）替换我们的主机服务。



5. 用 Web 组件替换主机服务 我相信这一步非常微不足道。您需要有效做的是用 Web 组件替换主机服务的标记。下一章将介绍在 Host 和 Alien（位于 Web 组件内）组件之间建立通信的不同方法，但本质上，这里并不复杂： 我们必须将这两个服务连接到同一个存储； 当存储更新时，我们必须（在双方）调度和监听事件。 当我们用 Web Component 包装器包装 Alien 的服务后，就可以用包装器替换相应的 Host 服务了 当我们用 Web Component 包装器包装 Alien 的服务后，就可以用包装器替换相应的 Host 服务了。（大预览） localStorage,无论您是否有状态管理系统、通过路由通信还是与简单 DOM 事件通信，此架构都应该相同。通过用 Web Component 包装器替换您的 Host 服务，您就完成了服务的迁移，并可以在您的项目中享受这个可爱的弗兰肯斯坦了。 然而，它还不像真正的迁移。一定还有别的东西。 6. 冲洗并重复  迁移第一个服务后，您需要对所有服务/组件执行步骤 3 到 5。所有原则和建议仍然有效。