ホームページ >ウェブフロントエンド >CSSチュートリアル >防弾 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>
// When the attribute is not set <my-input></my-input> // When the property is `undefined` (example using JSX) <my-input type={undefined}></my-input>
<!-- 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 サイトの他の関連記事を参照してください。