custom-element.ts

//hacked up view engine parts
import {ComponentFactory, ComponentRef} from './core/linker/component_factory';
import {ErrorHandler} from './core/error_handler';
import {Injector} from './core/di/injector';
import {NgModuleRef} from './core/linker/ng_module_factory';
import {RendererFactory2} from './core/render/api';
import {Sanitizer} from './core/security';
import {initServicesIfNeeded} from './core/view/index';
import {SimpleRendererFactory} from './core/renderer';

import {AppCompNgFactory} from './app.ngfactory';

export class AppCompHost extends HTMLElement implements Injector, NgModuleRef<any>  {
  private renderer2: RendererFactory2;

  componentRef: ComponentRef<any>;

  constructor() {
      super();
	  initServicesIfNeeded();
	  this.renderer2 = new SimpleRendererFactory();
  }
  
  //CE Spec
  //"watch" for attribute changes
  static get observedAttributes(){
	  return ['name']
  }

  get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
    switch (token) {
      case RendererFactory2:
        return this.renderer2;
      case Sanitizer:
      case ErrorHandler:
        return null;
      case NgModuleRef:
        return this;
    }
    return Injector.NULL.get(token, notFoundValue);
  }
  //CE lifecycle callback (self bootstrap)
  connectedCallback(){
	  this.bootstrap();
	  this.tick();
  }
  //CE lifecycle callback
  attributeChangedCallback(key, oldValue, newValue, uri){
	  if(key === 'name' && newValue){
		  this.componentRef.instance.name = newValue;
	  }
	  this.tick();
  }

  //externallly bootstrap
  bootstrap() {
    this.componentRef =
        AppCompNgFactory.create(Injector.NULL, [], this, this);
  }
  //force CD
  tick() { this.componentRef.changeDetectorRef.detectChanges(); }

  get injector() { return this; }
  get componentFactoryResolver(): any { return null!; }
  get instance() { return this; }
  destroy() {}
  onDestroy(callback: () => void) {}
}

customElements.define('ng-widget', AppCompHost);