How to listen for custom events defined web component

Question

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..."

Answer 1

For others who end up here, the specific property you're looking for to break out of the shadow root 'jail' is "composed".

So:

this.checkEvent = new CustomEvent("check", {
  bubbles: true,
  cancelable: false,
  composed: true
});

You can also add another property, "detail" which will carry custom data on the event, if you like.

More info here: composed property

Answer 2

If your compound element <my-checkreport> uses a Shadow DOM to embed its content (<my-checkbox>, label, styling...), dispatched events from an inner element (here <my-checkbox>) will be fired inside the (container's) Shadow DOM.

Therefore, you should add the event listener to the Shadow DOM's root of the compound custom element (this.shadowRoot) instead of to the element (this) itself. In <my-checkreport>:

connectedCallback(){
  ...
  this.shadowRoot.addEventListener("check", function (e) {
        console.log('listend to check event');
        console.log(e);
    });
 }

More on Shadow DOM:

• For the beginners: Presentation by Eric Bidelman
• Good summary: Synthesis by Hayato Ito
• Specs: W3C Working Draft
• SO: questions and answers