什么是 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
标签：Web,哪个,项目,Lit,https,组件,我们 来源： https://www.cnblogs.com/amboke/p/16648322.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。