Web组件中的自定义事件？

Question

我想实现自己的文本输入Web组件，如：

<x-text autocomplete="{{ true }}"></x-text>

问题是，当用户从自动完成列表中选择一个项目时，我的Web组件如何触发事件？我正在寻找这样的东西：

<x-text autocomplete="{{ true }}" on-select="itemSelected()"></x-text>

有没有办法实现这个目标？

Answer 1

这是可能的，但可能不是很直观。

您无法绑定到HTML中的自定义事件。您必须在代码中手动执行此操作：

<x-foo id="wtvr"></x-foo>

_root.query('#wtvr').on['foo'].add((e) => print(e));

然后，当组件触发事件时，您只需编写：

_root.on['foo'].dispatch(new CustomEvent('foo'));

Answer 2

如果没有那么多的Web组件，我会从头顶开始为选择本身实现onchange / onblur函数。