別誤會我的意思，我對 Web 元件 API 的預設值沒有任何反對意見。我對他們的問題是他們不可靠。
為 API 提供可用選項清單的常見方法是使用 TypeScript 的 untion 類型。
這裡有一些基本的 CSS 來使這些變體發揮作用。
注意：程式碼範例使用 Lit，但這裡討論的原理可以輕鬆應用於其他函式庫和框架。
挑戰是自訂元素/Web 元件可以在任何地方使用。它們可以以字串、伺服器端語言（如 PHP）插入 DOM 中，可以在 JavaScript 的 createElement 函數中創建，甚至可以在標準 HTML 中創建。我的意思是，並不總是有一種“類型安全”的方法來確保準確設定自訂元素屬性。因此，我們元件庫的 PR 清單中的一項是：
✅ 屬性和屬性在設定、取消設定和設定不當時都有效。
根據這些準則，讓我們測試上面的 API 設定。
您可以在這裡測試這個範例：
解決此問題的最簡單方法是使按鈕元素樣式與預設樣式相符。
現在我們可以刪除預設變體的程式碼。
為了避免混淆，您可以留下樣式並添加評論。
我們也可以更新 TypeScript API，使其成為可選並刪除預設值。
現在，如果值已設定、未設定或設定不當，元素的行為將保持一致！
您可以在此處查看最終程式碼：
透過刪除對預設值的依賴，您可以建立更具彈性的 Web 元件 API。如果您的元件必須具有預設值才能正常運作，請務必查看本文以建立一致運作的 Web 元件。
以上是不要依賴預設屬性值來設定 Web 元件的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
