4

I want to implement my own text input web component like:

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

The thing is, when the user chooses an item from the autocompletion list, how can my web component fire an event? I'm looking for something like this:

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

Is there a way to accomplish this?

Fabio Benedetti
  • 317
  • 2
  • 12
Ahmed
  • 1,669
  • 4
  • 14
  • 16

2 Answers2

3

This is possible, but maybe not very intuitive.

You can't bind to a custom event in HTML. You must do it manually in code:

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

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

Then when the components fires the event, you just write:

_root.on['foo'].dispatch(new CustomEvent('foo'));
Kai Sellgren
  • 27,954
  • 10
  • 75
  • 87
1

Without having working with web components that much, from the top of my head I would just implement a onchange/onblur function for the selection itself.

DrColossos
  • 12,656
  • 3
  • 46
  • 67