wa-checkbox の name プロパティの型修正で文字列受容を実現

wa-checkbox コンポーネントで name プロパティが文字列を受け取れず、生成された型定義が null のみとなっていた問題を、基底クラスの定義に委譲する形で解消した。これにより、フォーム送信時に期待通りの name/value ペアが利用できるようになる。

背景

wa-checkbox は WebAwesomeFormAssociatedElement を継承しているが、サブクラス側で name プロパティを null と明示的に定義していたため、型情報が上書きされて string が受け取れなくなっていた。生成された TypeScript 定義 (checkbox.d.ts) では name: null; としか表現されず、実装上も文字列を設定できない状態だった。結果として、チェックボックスを含むフォームで名前付きデータを送信しようとしても、name が欠落するリスクが生じていた。

この問題は、プロパティの型が不適切であることが直接の原因であり、基底クラスが提供すべき string | null の型情報がサブクラスで覆い隠されていた点に起因している。

技術的な変更

サブクラス WaCheckbox から name プロパティの宣言を 削除 しただけのシンプルな修正である。削除前は次のように記述されていた。

/** The name of the checkbox, submitted as a name/value pair with form data. */
@property({ reflect: true }) name = null;

削除後は同行が無くなり、WaCheckbox は基底クラス WebAwesomeFormAssociatedElement が提供するプロパティ定義をそのまま継承する。

// 変更前の `name` 定義は削除され、ファイル内には記述が残らない。

基底クラス WebAwesomeFormAssociatedElement では以下のように name が string | null として定義されているため、WaCheckbox も同様の型情報を取得できる。

@property({ reflect: true }) name: string | null = null;

この削除により、wa-checkbox の型定義は name: string | null; と正しく生成され、文字列の設定が可能になる。

設計判断

今回の修正は サブクラスでの再宣言を排除し、基底クラスの単一責任に委譲 するという設計選択を示している。name は全てのフォーム関連要素で共通の属性であるため、各コンポーネントが独自に型を上書きする必要はなく、継承を活用する方が保守性と一貫性を高める。

このアプローチは 型の重複定義によるバグリスク を低減し、将来的に基底クラスの型が変更された場合でもサブクラス側で個別に修正する手間が不要になるというメリットがある。

結果として、wa-checkbox は他のフォーム要素と同等の型保証を受け、ライブラリ全体の設計原則（DRY と Liskov Substitution Principle）に沿った形となった。