不要依賴預設屬性值來設定 Web 元件的樣式

別誤會我的意思，我對 Web 元件 API 的預設值沒有任何反對意見。我對他們的問題是他們不可靠。

問題

為 API 提供可用選項清單的常見方法是使用 TypeScript 的 untion 類型。

這裡有一些基本的 CSS 來使這些變體發揮作用。

注意：程式碼範例使用 Lit，但這裡討論的原理可以輕鬆應用於其他函式庫和框架。

挑戰是自訂元素/Web 元件可以在任何地方使用。它們可以以字串、伺服器端語言（如 PHP）插入 DOM 中，可以在 JavaScript 的 createElement 函數中創建，甚至可以在標準 HTML 中創建。我的意思是，並不總是有一種“類型安全”的方法來確保準確設定自訂元素屬性。因此，我們元件庫的 PR 清單中的一項是：

✅ 屬性和屬性在設定、取消設定和設定不當時都有效。

測試我們的 API

根據這些準則，讓我們測試上面的 API 設定。

• 設定 - 一切看起來都很好。

• 未設定
  • 沒有設定屬性，它可以正常工作，因為我們有一個預設值，並且它被配置為在設定時反映元素上的屬性。
  • 如果我們將變數屬性設為未定義，則會破壞樣式。

• 設定不當 - 當我們將變體屬性設為「垃圾」時，它也會崩潰。

您可以在這裡測試這個範例：

修復 API

解決此問題的最簡單方法是使按鈕元素樣式與預設樣式相符。

現在我們可以刪除預設變體的程式碼。

為了避免混淆，您可以留下樣式並添加評論。

我們也可以更新 TypeScript API，使其成為可選並刪除預設值。

現在，如果值已設定、未設定或設定不當，元素的行為將保持一致！

您可以在此處查看最終程式碼：

結論

透過刪除對預設值的依賴，您可以建立更具彈性的 Web 元件 API。如果您的元件必須具有預設值才能正常運作，請務必查看本文以建立一致運作的 Web 元件。

以上是不要依賴預設屬性值來設定 Web 元件的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！