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

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

Answer 2

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