Пользовательские события в веб-компонентах?

Question

Я хочу реализовать свой собственный веб-компонент для ввода текста, например:

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

Дело в том, что, когда пользователь выбирает элемент из списка автозаполнения, как мой веб-компонент может инициировать событие? Я ищу что-то вроде этого:

<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

Не работая так много с веб-компонентами, я бы просто реализовал функцию onchange/onblur для самого выбора.