I have a custom element my-checkbox that wraps a checkbox, label, styling, etc. When that checkbox is toggled I am defining a CustomEvent named check within my constructor, like so:
constructor(){
super();
this._shadowRoot = this.attachShadow({mode: 'open'});
this.checkEvent = new CustomEvent(check, {
bubbles: true,
cancelable: false,
});
}
I dispatch that event when the checkbox is toggled:
toggleCheckbox(){
this.dispatchEvent(this.checkEvent);
console.log(this.checkEvent);
...
}
I infer that this event is being dispatched because the contents of the console.log show the signature of a CustomEvent
I have another custom element my-checkreport that contains my-checkbox and is supposed to react to the check event. I have defined an event listener in the connected callback of my-checkreport
connectedCallback(){
...
this.addEventListener(check, function (e) {
console.log('listend to check event');
console.log(e);
});
}
However, this eventListener never fires, never seems to 'hear' the check event dispatched in the my-checkbox component. I've tried adding this listener in the constructor with the same result.
Any ideas what I'm doing wrong?
Background: I'm doing it this way in the interest of making these elements composable. I also have read that best practices for developing web components is to Use custom events to pass information out of components...
