什么是 Web 组件？我们更喜欢哪个 Web 组件库？

Web Components 是一种结构，它允许我们创建可重用的自定义元素并在 Web 应用程序中使用它们。例如，我们有两个不同的项目，我们将为它们制作相同的按钮，但我们不想一遍又一遍地编写代码。我们将在此处遵循的方式将是使用 Web 组件。我们用 web 组件创建的组件可以在不同的项目中使用，并防止我们重复代码。我们可以像这样简单地定义 Web 组件。

我们的动机是什么？为什么我们决定使用 Web Components？

作为 sahbinden.com，我们在前端有不止一个项目，并且每天都在不断地向这些项目添加新项目。这些项目在设计方面非常相似，但在基础设施方面却截然不同。换句话说，我们在多个项目中使用不同技术的相同按钮。在这种情况下，我们必须决定两条道路出现在我们面前；要么每个项目都有自己的组件，我们将为每个项目重复制作每个组件，或者我们将制作一个设计系统项目并在所有项目中使用其中的组件。虽然以这种方式编写两种方式时，制作和使用单个组件显然更有利，但工作并不是那么简单。因为每个项目编写自己的组件其实很简单。没有什么复杂的。但是制作单个组件要困难得多和复杂得多。因为有很多不同的问题，比如兼容性、集成、SEO。我们决定综合考虑这些问题，进行初步研究。

尖峰研究和图书馆

我们组建了一个6人的spike团队，其中5人负责图书馆研究，1人负责管理这项工作。然后我们确定了 5 个最流行的 Web 组件库，并将它们分配给每个团队成员。这些分别是； Angular Web 组件、FAST、Lit、Stencil 和 Open Web 组件。我们的目标是检查这 5 个库，制作示例并确定最适合我们的库。在这里做决定时，根据优先级来决定是非常重要的。一个特性可能对一个团队非常重要，而对另一个团队则不重要。

性能是我们在 Spike 研究中关注的部分的最前沿。除了性能之外，TypeScript 支持、仍在维护的事实以及框架支持等问题对我们来说也是重要的问题。我们根据这些项目做了我们的工作并做出了我们的决定。

Angular Web 组件，FAST ve Open Web 组件

经过我们的研究，最先被淘汰的 3 个库是 Angular Web Component、FAST 和 Open Web Component。其原因如下；

• Angular Web 组件：拥有 Angular 并以所有者身份编写 Angular 是一个加分项，但文档不足以及添加 Angular 运行时的必要性给系统带来了很大的负担。此外，没有任何大型项目或公司使用它，这让人怀疑他们将来可能会削减支持。出于这个原因，我们没有选择它。
• FAST：虽然背后是微软，但在Microsoft Teams中使用，框架支持是一大优势，我们没有选择它，因为它在浏览器支持和文档方面不够。
• Open Web Components：Open Web Components实际上是一个允许Web组件库协同工作并且结构灵活的库。为此，我们必须考虑并决定很多事情。我们决定我们没有这样的需求，因此我们没有选择它。

Yaptığımız araştırmadan çıkan özet tablo

从以上评论可以理解，我们想要一个能够满足我们需求并且在我们看来没有任何缺点的库。实际上有两个库可以满足这一点；点燃和模板。

点燃与模板

在我们淘汰了库之后，我们不得不在 Lit 和 Stencil 之间进行选择。坦率地说，我们将在这里做出的选择并不像我们预期的那么容易。 Google 支持 Lit，Ionic Team 支持 Stencil。两者都兼容所有框架并支持 TypeScript。两者都有很好的浏览器支持。在这种情况下，我们决定做更多的研究，经过研究，我们的选择是点燃。原因是；

• 虽然 Stencil 的文档没有包含详细信息，但 Lit 的文档包含了详细信息，
• Stencil 抱怨没有快速回答详细的问题，
• 在性能方面，Lit 具有较高的渲染速度，
• 谷歌、微软、Adobe、IBM 等公司都在使用 Lit，
• 尤其是Lit v2，势头迅猛，继续快速发展，
• 在我们所做的研究中，很明显，在许多从 Lit 转移到 Stencil 的项目中，都会回归到 Lit。

Lit 成为我们为设计系统结构选择的 Web 组件库。但实际上这项工作才刚刚开始。因为从现在开始，我们将不得不深入了解 Lit 的细节。

什么是点亮的？点亮示例

Lit 将自己描述为一个简单的库，可让您构建快速、高性能的 Web 组件。它具有适合 web 组件结构的结构，并通过其压缩压缩结构提供了巨大的性能优势。

让我们用 lit 制作一个简单的按钮组件。

Lit ile oluşturulmuş bir buton componenti

首先，我们为我们的组件导入必要的定义，然后 @customElement('来自所有者按钮') 我们用 来确定我们组件的标签。所以我们有我们的组件 <sahibinden-button></sahibinden-button> 我们将使用 as。然后我们进行 css 定义和 @财产 我们定义了我们将使用的道具。 使成为 通过 html 使用该方法，我们编写组件的渲染内容。这里 _onClick 我们还在方法中发出事件。也就是说，我们说按钮是从组件点击到使用组件的地方。简单地说，我们的组件接受一个 prop 并在单击它时发出一个事件。

Lit ile oluşturduğumuz buton componentinin kullanımı

为了在一个简单的 html 页面中使用我们制作的组件，我们首先导入必要的文件。在这里，我们还导入了我们制作的按钮，正如我们上面提到的

 <sahibinden-button text="Click meee!"></sahibinden-button>

我们也可以通过提供 text 道具来使用它。在这里，我们还可以使用 addEventListener 监听我们从组件发送的事件。

对整个项目 从这里 你可以到达。

结论

经过我们的研究，Lit 是最适合我们的库。我们正在使用 Lit 开始设计系统研究。我们计划用 Lit 创建一个项目并将其导入到我们现有的项目中。作为本文的延续，我们将分享我们的设计系统项目。

感谢您阅读我的帖子。如果你喜欢我的文章，可以点击下方的掌声按钮。

您可以通过以下地址与我联系：

GitHub： github.com/BurakGur _
推特： twitter.com/BrkGur _
网站： burakgur.com

资源

https://developer.mozilla.org/en-US/docs/Web/Web_Components
https://angular.io/guide/elements
https://www.fast.design/
https://stenciljs.com/
https://lit.dev/
https://open-wc.org/
https://github.com/lit/lit-element-starter-ts
https://www.phase2technology.com/blog/web-components-our-journey-from-lit-to-stencil-and-back-again
https://www.abeautifulsite.net/posts/moving-from-stencil-to-lit-element/

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/9562/18040200