次のような独自のテキスト入力 Web コンポーネントを実装したいと考えています。
<x-text autocomplete="{{ true }}"></x-text>
問題は、ユーザーがオートコンプリート リストからアイテムを選択したときに、Web コンポーネントがどのようにイベントを発生させることができるかということです。私はこのようなものを探しています:
<x-text autocomplete="{{ true }}" on-select="itemSelected()"></x-text>
これを達成する方法はありますか？
これは可能ですが、あまり直感的ではないかもしれません。
HTML のカスタム イベントにバインドすることはできません。コードで手動で行う必要があります。
<x-foo id="wtvr"></x-foo>
_root.query('#wtvr').on['foo'].add((e) => print(e));
次に、コンポーネントがイベントを発生させたら、次のように記述します。
_root.on['foo'].dispatch(new CustomEvent('foo'));
Webコンポーネントをそれほど操作しなくても、頭のてっぺんから、選択自体にonchange/onblur関数を実装するだけでした。