Dispatch Custom Events Using "this" or "window"?

Question

When I create a web component (I'm using lit/lit-element in particular) that dispatches a custom event, I can:

Dispatch the event from window:

const evt = new CustomEvent("my-custom-event", {detail: "some-data"});
window.dispatchEvent(evt);

Or dispatch the event from the web component itself (this):

const evt = new CustomEvent("my-custom-event", {detail: "some-data"});
this.dispatchEvent(evt);

Is there a reason why I may want to do one versus the other?

Answer 1

It is possible to use window as an event dispatcher to dispatch custom events, and to add handlers that handle them.

window.addEventListener("xyz", event => console.log(event.detail));

event = new CustomEvent("xyz", {
  detail: {
    action: "didInitialize",
    payload: 3
  }
});

window.dispatchEvent(event);

Output:

{action: 'didInitialize', payload: 3}

The Event has timeStamp and all the usual event properties.