I have this code in my component that is essentially the same as the example in the svelte docs:
export default {
methods: {
assessmentMouseover(e) {
const event = new CustomEvent('assessment-mouseover', {
detail: 'something',
bubbles: true,
cancelable: true,
composed: true, // makes the event jump shadow DOM boundary
})
this.dispatchEvent(event)
},
},
// -- snip --
}
I then have this code in the script tag of the HTML page that instantiates this component which is also essentially the same as the svelte docs:
const el = document.querySelector('#radar');
el.addEventListener('assessment-mouseover', event => {
console.log('got here')
});
However, when I trigger the event, I get this error: this.dispatchEvent is not a function
.
I've tried a number of variations on this.dispatchEvent()
like simply
dispatchEvent()
, which doesn't error but also doesn't trigger the listener;
and window.dispatchEvent()
which also fails to trigger.
What am I doing wrong?