防彈 Web 元件 API

Web 元件/自訂元素提供了一些出色的功能，可以使您的使用者體驗更加高效和可擴展，但也有一些「陷阱」可能會阻止團隊獲得良好的組件體驗。

問題

自訂元素/Web 元件的一大優點有時對他們來說是一個挑戰 - 它們可以在任何地方使用。您永遠不知道它們是否在框架中、在類型安全的環境中使用、在伺服器上使用 PHP 等語言呈現、使用 JavaScript 的 creatElement 函數以程式設計方式創建，甚至在普通的 HTML 中。

挑戰在於沒有一致的方法來確保正確實作您的 Web 元件 API。因此，我們元件庫的 PR 清單中的一項是：

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

例如，在我們的函式庫中，我們有一個「輸入」元件，就像原生的 一樣。元素，具有帶有一些指定值的 type 屬性。它不具有所有相同的選項，因為我們為其他一些控制項（如單選按鈕和複選框）提供了特定的元件。

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

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

當我們測試此屬性時，我們得到不一致的結果。

• 設定
  • 一切都如預期進行。

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

• 未設定
  • 由於預設值而未設定屬性時，組件可以正常工作
  • 當屬性未定義時，元件會正確呈現，因為內部 HTML 元素是有彈性的，但元件中的自訂邏輯和驗證會中斷

// When the attribute is not set
<my-input></my-input>

// When the property is `undefined` (example using JSX)
<my-input type={undefined}></my-input>

• 設定不當
  • 將 type 屬性值設為「垃圾」會呈現文字輸入，但也會破壞我們的自訂邏輯和驗證。
  • 將其設定為有效HTML 輸入類型的值，但不是我們為元件指定的值，會呈現不適合我們元件的控件，這不僅會破壞我們的自訂邏輯和驗證，還會破壞我們的樣式/設計。

<!-- not a real type -->
<my-input type="rubbish"></my-input>

<!-- we don't want users using this type -->
<my-input type="range"></my-input>

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

我們該如何解決它？

我注意到原生 HTML 元素似乎通過了「設定、未設定和設定不當」測試，所以讓我們看看是否可以從中學習。

當我錯誤地設定本機輸入的屬性並記錄屬性值時，我可以明白為什麼它會起作用。

<!-- set the value to a non-standard type -->
<input type="rubbish" />
<input>



<p>If an invalid value is assigned to the attribute or property, it falls back to a default value. We should be able to do the same and still maintain strong typing.</p>

<p>Let's start by creating a list of valid values and a type for our property.<br>
</p>

<pre class="brush:php;toolbar:false">const inputTypes = [
  'color',
  'date',
  'email',
  'number',
  'password',
  'search',
  'tel',
  'text',
] as const;

我們可以使用陣列建立聯合類型以進行 TypeScript 驗證。

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

現在我們可以使用一些驗證邏輯來更新我們的自訂元素屬性。我們可以透過將現有屬性轉換為標準 JavaScript 類別 getter 和 setter 來實現此目的。

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

這是我們的最終輸出：

結論

有了這個新的驗證，我們的輸入元件比以前更具彈性，並且在必要時還允許進行更複雜的驗證。對於某些屬性，尤其是用於樣式的屬性，此方法也可能太過分了。對於這些場景，請務必查看這篇文章。

以上是防彈 Web 元件 API的詳細內容。更多資訊請關注PHP中文網其他相關文章！