您應該隨 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中文網其他相關文章！