# 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 :heavy_check_mark:
- **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 :x:
- **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 :heavy_check_mark: