dependency-injection.ts

const provider = Symbol();

export function provide(key: symbol, value: any, ctx?: HTMLElement) {
  const node: any = ctx || document.body;
  let providers = node[provider];
  if (!providers) {
    node[provider] = providers = {};
    node.addEventListener('di-provider', (event: CustomEvent) => {
      event.detail.provider = providers[event.detail.key];
      event.preventDefault();
      event.stopPropagation();
    });
  }
  providers[key] = value;
}

export function acquire(key: symbol, ctx?: HTMLElement) {
  ctx = ctx || document.body;
  let event = new CustomEvent('di-provider', {
    detail: {key},
    bubbles: true,
    cancelable: true,
    composed: true,
  });
  ctx.dispatchEvent(event);
  if (event.defaultPrevented) {
    return event.detail.provider;
  } else {
    throw new Error(`No provider found for ${key.toString()}.`);
  }
}