防弾 Web コンポーネント API

Web コンポーネント/カスタム要素は、UX をより効率的かつスケーラブルにする優れた機能を提供しますが、チームがコンポーネントを快適に使用できない可能性がある「落とし穴」がいくつかあります。

問題

カスタム要素/Web コンポーネントの優れた点の 1 つは、どこでも使用できるという点です。これらがフレームワークで使用されているのか、タイプセーフな環境で使用されているのか、PHP などの言語を使用してサーバー上でレンダリングされているのか、JavaScript の creatElement 関数を使用してプログラムで作成されているのか、それとも単純な HTML で使用されているのかはわかりません。

課題は、Web コンポーネント API が正しく実装されていることを確認する一貫した方法がないことです。このため、コンポーネント ライブラリの PR チェックリストの項目の 1 つは次のとおりです:

✅ 属性とプロパティは、設定、設定解除、または設定が不十分な場合でも機能します。

たとえば、私たちのライブラリには、ネイティブの と同様の「input」コンポーネントがあります。要素には、いくつかの指定された値を持つ 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 属性値を「rubbish」に設定すると、テキスト入力がレンダリングされますが、カスタム ロジックと検証も壊れます。
  • コンポーネントに対して指定したものではなく、有効な 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 クラスのゲッターおよびセッターに変換します。

<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 中国語 Web サイトの他の関連記事を参照してください。