网络组件社区聚合物网络组件

Posted 2023-02-23

【中文标题】网络组件社区聚合物网络组件

【英文标题】：Web components community polymer web components

【发布时间】：2021-08-01 02:39:11

【问题描述】：

如果我查看polymer shop，我会立即被想用它作为我的网上商店的入门者。不仅因为它已经是一家网上商店（完整的 pwa 技术），还因为它在浏览器/移动设备上拥有出色的（离线）体验，拥有 proper documentation 和 still maintained。

然后查看聚合物主页，发现该项目基于过时的聚合物版本，甚至它首先使用聚合物的事实也很奇怪：

Polymer 库处于维护模式。对于新的开发，我们推荐 Lit。

所以我的问题是lit 是否会拥有商店似乎依赖的网络组件的rich choice？

这可能是一个愚蠢的问题，但我跳过了聚合物，只是在 google IO 中查看了一些令人兴奋的消息

【问题讨论】：

Polymer 是 Google 在（旧的）Web Components V0 版本（它是 Google 派对，而不是标准）之上的 BaseClass。 Lit 是 Google 建立在“V1”W3C 标准 Web 组件之上的较新 BaseClass，可在所有现代浏览器中运行（自 2018 年以来）Polymer Shop 可以使用 V1 构建；我不知道是否有人已经这样做了。它相当基本。从lit.dev开始

@Danny'365CSI'Engelman 谢谢你的回复，我看到聚合物有一个丰富的web component library，它们被用于商店项目。如果我要将 shop 项目移植到 lit 我会在使用依赖项时遇到问题吗？我希望创建一个更好的shop demo，它具有基本的原生外观，可以在移动设备和笔记本电脑上使用，并且可以离线工作（当产品请求时）。还有2个其他可能的候选人； ionic 和 native

除了全部使用 Native 之外，还有大量的 BaseClass（就像 Ionic 一样），它们为您提供了一个“简单”的入门。但是A.您正在学习一种工具，而不是一种技术。 B. 没有人敢打赌其中哪一个会在 3 年后仍然存在。请记住.. 早在 15 年前，jQuery 时代就有几十种替代品。如果你碰巧选择了任何东西，但 jQuery ......你付出了代价。见WebComponents.dev/all the ways to make a Web Component ...他们有55个工具供你选择

有一个Slack频道：lit-and-friends.slack.com; Google 员工 Justin Fagnani 和/或 Gary Norton 可能会告诉您有关（旧）Polymer 代码/商店的所有信息

【参考方案1】：

Lit 以及之前的 Polymer 的目标是帮助构建 Web 组件和应用程序，尽可能使用浏览器功能。

例如，jQuery 将所有不同的浏览器功能封装在它自己的语法中，以至于开发人员学习的是 jQuery，而不是 javascript。 jQuery 组件假定您拥有 jQuery 并依赖这些 jQuery 方法来运行。

Lit 和 Polymer 都支持 web 组件 - 这使得每个组件 更加 更加独立。混合使用 jQuery 和它的任何竞争对手真的很痛苦，但这里不是这样。

用于构建该商店的所有组件都是稳定的still on npm。您可以根据需要使用它们，而且我有仍在使用它们的实时应用程序。

但是，支持最新的浏览器功能也有其风险。 Polymer 严重依赖 html Imports（只有 Chrome 曾经实现并最终被放弃）和它自己的模板库。它最终被移植到 ES6 模块，但核心设计远不适合它。这些组件非常稳定，但您并不想用它开始任何新的东西。

与 Polymer 相比，Lit 的主见要少得多，而且水平要低得多。例如，Polymer 支持使用property 语法的两种方式绑定，但必须对您正在做什么来支持它做出假设（这通常会破坏）。对于极其稳定的属性设置器，Lit 放弃了这一点，但如果您希望用户编写值，您必须订阅事件并自己滚动（尽管 Lit 确实使事件非常易于管理）。

因此，如果您要构建自己的 Web 组件或应用程序，Lit 是迄今为止更好的选择，LitElement 是轻量级的，extremely compatible 与其他所有功能一样。您可以在 Lit 中使用那些 Polymer shop 组件（我有），但对于其中大多数都有更新的替代品，特别是 MWC。