catching custom events with hypens in the event name eg event-name

[Jero9999]

I am writing my own component(s) and I am in need of handing a custom event in a child component. Normally this would work
html"<child-component @customEvent=${myEventHandler}></child-component>"

But the event in question has a hyphen in it (eg my-custom-event). So that changes the template to :
`html"<child-component @my-custom-event=${myEventHandler}>"

and that never seems to trigger the event handler.
I have looked around for any guidance on what syntax is legal and can't see anything. If it is in the lit docs, then I cannot find it.

More generally, I have looked for guidance on what naming conventions there are for synthetic events and I can't find any there either.

Can someone help? should @my-event-${handler} work? Am I just doing something wrong? Or are supported names more restrictive that this?

[tbroyer]

This is supposed to work with @my-event=${myEventHandler}, there are a few tests in Lit that use kebab-case like that, e.g.

lit/packages/lit-html/src/test/lit-html_test.ts

Lines 1403 to 1430 in 47c6c90

	test('event listeners can see events fired by dynamic children', () => {
	// This tests that node directives are called in the commit phase, not
	// the setValue phase
	class TestElement1 extends HTMLElement {
	connectedCallback() {
	this.dispatchEvent(
	new CustomEvent('test-event', {
	bubbles: true,
	})
	);
	}
	}
	customElements.define('test-element-1', TestElement1);
	let event: Event | undefined = undefined;
	const listener = (e: Event) => {
	event = e;
	};
	document.body.appendChild(container);
	render(
	html`<div @test-event=${listener}>
	${html`<test-element-1></test-element-1>`}
	</div>`,
	container
	);
	assert.isOk(event);
	});
	});