How to listen for custom events defined web component

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