Why "root context" is the coherent fallback for "dispatch context"

We have two components: Red and Blue. From a component's point of view, there is "me" and "other", where "other" can be either the outer environment or another component.

// component-red

const redVar = new AsyncContext.Variable({
  defaultValue: "empty"
});

redVar.run("something", () => {
  eventTarget.addEventListener("some-event", () => {
    console.log(`red: ${redVar}`);
  });
  
  eventTarget.dispatchEvent(new CustomEvent("some-event"));
});

// component-blue

const blueVar = new AsyncContext.Variable({
  defaultValue: "empty",
});

blueVar.run("something", () => {
  eventTarget.dispatchEvent(new CustomEvent("some-event"));
});

• If going always by registration context

  • When the event is dispatched by Red, it logs red: something
  • When the event is dispatched by Blue, it logs red: something
  • When the event is dispatched by the browser, it logs red: something

  Thus, the cases in which the events are dispatched by non-Red are coherent

• If going by dispatch context, with registration context as the fallback

  • When the event is dispatched by Red, it logs red: something
  • When the event is dispatched by Blue, it logs red: empty
  • When the event is dispatched by the browser, it logs red: something

  Thus, the cases in which the events are dispatched by non-Red are not coherent

• If going by dispatch context, with root context as the fallback

  • When the event is dispatched by Red, it logs red: something
  • When the event is dispatched by Blue, it logs red: empty
  • When the event is dispatched by the browser, it logs red: empty

  Thus, the cases in which the events are dispatched by non-Red are coherent