Should binding to (custom) DOM event, with hyphen in the name work?

Hi there.

I’ve build a custom StencilJS component that fires a custom DOM event (see below). FYI: The ‘on’ part is added bij StencilJS itself.

@Event() searchEvent: EventEmitter<string>;

But when I want to bind to that event it doesn’t work. See my HTML and viewmodel.

// Html
<my-component ref="myComponent" search-event.trigger="handleSearch($event)">

// View model
export class App {

	private myComponent: StencilJS.MyComponent;

	private attached(): void {
		// This works. So I know that the event is triggered properly.
		this.myComponent.addEventListener('searchEvent', (ev: CustomEvent<string>) => this.handleSearch(ev));
	}

	private handleSearch(event: CustomEvent<string>): void {
	 	// The event handler. This is not triggered via the 'search-event.trigger' binding.
	}	
}

But when I change the event name on my StencilJS component to the following

@Event() searchevent: EventEmitter<string>;

and my html to

<my-component ref="myComponent" searchevent.trigger="handleSearch($event)">

the binding works fine! Is there something I am missing? Can’t aurelia handle the hyphen in the DOM event name when binding?

Any help is appreciated.

1 Like

Aurelia takes event names in the template as is, though there’ a way or two to tell a binding to use camel cased version of the event name:

We will have proper doc around this in v2, as it seems to be a common requirements. Thanks for asking about this.