您应该随 Web 组件一起发送清单

除了组件之外，自定义元素清单是您可以在库中提供的最重要的东西。

什么是自定义元素清单 (CEM)？

自定义元素清单是一个架构，旨在记录有关自定义元素/Web 组件的元数据，包括属性、属性、方法、事件、槽、CSS 部分和 CSS 变量。它获取有关组件的所有信息并将其序列化到项目中的单个 json 文件中。

用户为什么需要它？

这种标准化的文档方法为团队如何使用组件库并与之交互释放了巨大的可能性。开发人员可以将其用于文档目的，例如 Adob​​e Spectrum 的 API 文档。

团队还可以将它们用于框架、IDE 集成以及 Storybook 等其他工具。

如果您想创建想要与组件一起提供的特定类型或框架集成，这很好，但很难预测所有用户的需求。您可能正在构建要在 Vue.js 环境中使用的组件，但另一个团队可能需要在 React 环境中使用您的组件。团队可以使用 CEM 在本地生成自己的包装器，而不是等待您构建和发布 React 包装器。

最近的一个例子是当我帮助一个团队在 Next.js 应用程序中启动并运行 Shoelace 时。 Shoelace 提供了 React 包装器，但当 Next.js 尝试在服务器端渲染它们时，它们会抛出错误。幸运的是，Shoelace 提供了他们的 CEM，所以我能够使用它来生成 SSR 安全的新包装器。

以下是示例链接：

如何创建 CEM？

有一些用于创建 CEM 的工具（Web-Component-Analyzer 和 Lit Labs 有一个实验工具），但我的首选工具是 Custom Elements Manifest Analyzer。

这是一个不错的选择，原因如下：

• 支持多种框架
• 它有一个很棒的插件系统，供开发人员扩展分析器的功能
• 它不仅易于使用，而且还拥有出色的文档和社区支持

以下是我创建的一些可用插件，可以帮助提高自定义元素的采用率：

• IDE 集成

  • VS 代码集成
  • JetBrains IDE 集成

• JS 框架集成

  • 反应包装器
  • Vue.js 类型
  • Solid.js 类型
  • 苗条类型
  • JSX 类型

注意： 这些为预生成的 CEM 提供 CEM 分析器插件和函数。如果您没有使用 CEM 分析器，请不用担心，您仍然可以利用这些。

结论

自定义元素清单是一个很好的工具，可以加速用户采用自定义元素组件库。通过将其作为产品的一部分提供，您可以为消费者提供确保他们的需求在使用自定义元素时得到满足的方法。

在选择用于创作自定义元素的库或框架时，最好尝试找到一个可以生成 CEM 的库或框架，特别是当您的组件将被其他团队使用时。

以上是您应该随 Web 组件一起发送清单的详细内容。更多信息请关注PHP中文网其他相关文章！