Custom Element event listener not triggered

Ask the community
,
1

Hi, I’ve got a super basic example of a Custom Element firing a Custom Event, but the listener is never triggered.

Using monitorEvents(window, ‘my-event’) in Chrome Dev Tools I can see the event firing.

Hoping I’m missing something super obvious! Thanks in advance.

// my-custom-element.js

class MyElement extends HTMLElement {
connectedCallback () {
this . innerHTML = ‘Hello World!’ ;

// Trigger an event that Velo can watch for 
// and handle using the [`on()`] function. 

**this** . dispatchEvent ( **new**  CustomEvent ( 'my-event' ));

}
}
customElements . define ( ‘my-custom-element’ , MyElement );

// Page

$w . onReady ( function () {
$w ( ‘#customElement’ ). on ( ‘my-event’ , ( event ) => {
console . log ( “Triggered” ); // This never fires
});
});

2

Does the “Hello World” work?

3

I think you should wait before you dispatch it, to let the $w to get ready.
Maybe try to add a small timeout before dispatching.

4

Hey thanks for responding. For reasons I cannot fathom, the same code but with different element and event names worked elsewhere.

I’ve also come across this when setting attributes - certain attribute names won’t trigger attributeChangedCallback, and changing ONLY the attribute name then works. No clue why.

5

@fioraau0 Had faced the same problem.
The custom element “on” trigger never fired.

Moving the same code into a new custom-code.js file and renaming the tag did the trick for me.
I reckon, just renaming the tag may also do the trick, weird.

6

Well this isn’t a solution lol