不同框架中的 Web 组件

Posted 2023-02-23

【中文标题】不同框架中的 Web 组件

【英文标题】：Web Components in Different Frameworks

【发布时间】：2019-04-05 14:13:17

【问题描述】：

我想创建自定义 Web 组件并在 Angular、React 和 vanilla javascript 等各种框架中使用它们。

我的问题是我应该使用 Polymer（或任何其他库）来创建一个还是通过扩展“htmlElement”来写下来。

有什么区别。

【问题讨论】：

他们对如何实现Web组件都有不同的看法。 Polymer 努力使未来的“香草”Web 组件已经可以通过 polyfills 和其他东西使用。 Polymer 的目标是最终不必使用任何 Polyfills --> 默认情况下，Web 组件将可用。

我建议避免使用任何框架，例如 Polymer，而直接编写原生代码。除了与真正的 Web 组件无关的抽象级别之外，Polymer 并没有添加太多东西。了解构造函数的规则以及如何在 shadow DOM 内部和外部使用 CSS。但要避免任何框架。我认为他们不值得。

Stencil 在这里可能是一个有趣的选择。它由 ionic 创建，并在将您的“模板组件”编译为原生 Web 组件时

【参考方案1】：

如果您想使用 Polymer 开发自定义元素，并将它们与另一个框架集成，您需要了解 Polymer 和其他框架的内部结构，以使它们完美运行在一起，尤其是对于复杂的架构。我想这是一个挑战。

此外，您还必须处理不同框架版本之间的版本和兼容性。例如，如果您使用 Polymer v3 开发组件，将很难将其与 Polymer v2 集成，尤其是在跨浏览器生态系统中。

最后，如果您打算分发您的自定义元素，您可以想象上述 2 个限制条件也适用于目标开发人员。作为一名 React 开发人员，我不希望必须导入另一个（Polymer）框架和 polyfill 来集成一些 3rd-party 组件。

出于这些原因，我建议设计 Vanilla 自定义元素，以便与最多数量的 Web 框架进行交互。