compile(element: HTMLElement, fragment: Element | DocumentFragment | string, context: any, overrideContext: any = undefined) {
    element.classList.remove('au-target');
    let view = this.viewCompiler.compile(fragment, this.resources).create(this.container);

    let viewSlot = new ViewSlot(element, true, undefined);
    viewSlot.add(view);
    viewSlot.bind(context, overrideContext);
    viewSlot.attached();
    return viewSlot;
  }

 return this.viewEngine.loadViewFactory(templateUrl).then(x => {
   let view = x.create(this.container);
   let viewSlot = new ViewSlot(element, true, undefined);
   
   viewSlot.add(view);
   viewSlot.bind(ctx, undefined);
   viewSlot.attached();
   
   return viewSlot;
 });

// creates a controller given a html template string and a viewmodel instance.
function createController(template, viewModel, viewsRequireLifecycle?: boolean) {
  let childContainer = container.createChild();

  let viewFactory = viewCompiler.compile(template);

  if (viewsRequireLifecycle !== undefined) {
    for (let id in viewFactory.instructions) {
      let targetInstruction = viewFactory.instructions[id];
      for (let behaviorInstruction of targetInstruction.behaviorInstructions) {
      if (behaviorInstruction.attrName === 'repeat') {
        behaviorInstruction.viewFactory._viewsRequireLifecycle = viewsRequireLifecycle;
      }
      }
    }
  }

  let metadata = new HtmlBehaviorResource();
  function App() {
    //
  }
  metadata.initialize(childContainer, App);
  metadata.elementName = metadata.htmlName = 'app';

  let controller = metadata.create(childContainer, BehaviorInstruction.dynamic(host, viewModel, viewFactory));
  controller.automate();

  viewSlot.removeAll();
  viewSlot.add(controller.view);

  return controller;
}

  hide() {
    if (!this.tooltipHovering) {
      this._viewSlot.unbind();
      this._viewSlot.detached();

      this._element.removeEventListener('mouseenter', this.tooltipHovered);
      this._element.removeEventListener('mouseleave', this.tooltipHovered);

      // stop Tether from caring about this.element
      // do not delete the reference to this.tether because it will probably be used again
      if (this._tether) {
        this._tether.destroy();
      }
      DOM.removeNode(this._element);
    }
  }

  /**
   * Binds the replaceable to the binding context and override context.
   * @param bindingContext The binding context.
   * @param overrideContext An override context for binding.
   */
  bind(bindingContext, overrideContext) {
    if (this.view === null) {
      this.view = (this.viewFactory as any).create();
      this.viewSlot.add(this.view);
    }

    this.view.bind(bindingContext, overrideContext);
  }

  /**
   * @internal
   */
  _hide() {
    if (!this.showing) {
      return;
    }

    this.showing = false;
    let removed = this.viewSlot.remove(this.view); // Promise or View

    if (removed instanceof Promise) {
      return removed.then(() => {
        this._unbindView();
      });
    }

    this._unbindView();
  }

  show(target: Element) {
    this._viewSlot.attached();

    this._element.addEventListener('mouseenter', this.tooltipHovered.bind(this));
    this._element.addEventListener('mouseleave', this.tooltipHovered.bind(this));

    this._tether = new Tether({
      element: this._element,
      target,
      classes: {
        element: false,
        target: false,
        enabled: false,
      },
      classPrefix: 'tooltip',
      attachment: 'bottom left',
      constraints: [{ to: 'window', attachment: 'together' }]
    });
    this._tether.position();
  }

  unbind() {
    if (this.view === null) {
      return;
    }

    this.view.unbind();

    // It seems to me that this code is subject to race conditions when animating.
    // For example a view could be returned to the cache and reused while it's still
    // attached to the DOM and animated.
    if (!this.viewFactory.isCaching) {
      return;
    }

    if (this.showing) {
      this.showing = false;
      this.viewSlot.remove(this.view, /*returnToCache:*/true, /*skipAnimation:*/true);
    } else {
      this.view.returnToCache();
    }

    this.view = null;
  }