refactor(render): cleanup access to native dom elements

BREAKING CHANGES:
- rename `ElementRef.domElement` to `ElementRef.nativeElement`
- add `Renderer.getNativeElementSync` to make the app side
  less dependent on the dom renderer.
- don’t use `ElementRef.nativeElement` in directives but
  use the methods on `Renderer` directly.
- Removed `ElementRef.setAttribute`. Use `Renderer.setElementAttribute` instead.

Closes #2712
Last part of #2476
Closes #2476

modules/angular2/src/core/compiler/dynamic_component_loader.ts

@@ -36,7 +36,7 @@ export class DynamicComponentLoader {
         .then(hostProtoViewRef => {
           var hostViewRef =
               this._viewManager.createRootHostView(hostProtoViewRef, overrideSelector, injector);
-          var newLocation = new ElementRef(hostViewRef, 0);
+          var newLocation = this._viewManager.getHostElement(hostViewRef);
           var component = this._viewManager.getComponent(newLocation);
 
           var dispose = () => { this._viewManager.destroyRootHostView(hostViewRef); };
@@ -68,7 +68,7 @@ export class DynamicComponentLoader {
           var viewContainer = this._viewManager.getViewContainer(location);
           var hostViewRef =
               viewContainer.create(hostProtoViewRef, viewContainer.length, null, injector);
-          var newLocation = new ElementRef(hostViewRef, 0);
+          var newLocation = this._viewManager.getHostElement(hostViewRef);
           var component = this._viewManager.getComponent(newLocation);
 
           var dispose = () => {

modules/angular2/src/core/compiler/element_ref.ts

@@ -1,41 +1,22 @@
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {normalizeBlank, BaseException} from 'angular2/src/facade/lang';
+import {BaseException} from 'angular2/src/facade/lang';
 import {ViewRef} from './view_ref';
-import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
-import {RenderViewRef, RenderElementRef} from 'angular2/src/render/api';
+import {RenderViewRef, RenderElementRef, Renderer} from 'angular2/src/render/api';
 
 /**
  * @exportedAs angular2/view
  */
 export class ElementRef implements RenderElementRef {
-  constructor(public parentView: ViewRef, public boundElementIndex: number) {}
+  constructor(public parentView: ViewRef, public boundElementIndex: number,
+              private _renderer: Renderer) {}
 
-  get renderView() { return this.parentView.render; }
+  get renderView(): RenderViewRef { return this.parentView.render; }
   // TODO(tbosch): remove this once Typescript supports declaring interfaces
   // that contain getters
-  set renderView(value: any) { throw new BaseException('Abstract setter'); }
+  set renderView(viewRef: RenderViewRef) { throw new BaseException('Abstract setter'); }
 
   /**
-   * Exposes the underlying DOM element.
-   * (DEPRECATED way of accessing the DOM, replacement coming)
+   * Exposes the underlying native element.
+   * Attention: This won't work in a webworker scenario!
    */
-  // TODO(tbosch): Here we expose the real DOM element.
-  // We need a more general way to read/write to the DOM element
-  // via a proper abstraction in the render layer
-  get domElement() {
-    return resolveInternalDomView(this.parentView.render)
-        .boundElements[this.boundElementIndex]
-        .element;
-  }
-
-  /**
-   * Gets an attribute from the underlying DOM element.
-   * (DEPRECATED way of accessing the DOM, replacement coming)
-   */
-  // TODO(tbosch): Here we expose the real DOM element.
-  // We need a more general way to read/write to the DOM element
-  // via a proper abstraction in the render layer
-  getAttribute(name: string): string {
-    return normalizeBlank(DOM.getAttribute(this.domElement, name));
-  }
+  get nativeElement(): any { return this._renderer.getNativeElementSync(this); }
 }

modules/angular2/src/core/compiler/view.ts

@@ -65,7 +65,7 @@ export class AppView implements ChangeDispatcher, EventDispatcher {
     this.elementRefs = ListWrapper.createFixedSize(this.proto.elementBinders.length);
     this.ref = new ViewRef(this);
     for (var i = 0; i < this.elementRefs.length; i++) {
-      this.elementRefs[i] = new ElementRef(this.ref, i);
+      this.elementRefs[i] = new ElementRef(this.ref, i, renderer);
     }
     this.locals = new Locals(null, MapWrapper.clone(protoLocals));  // TODO optimize this
   }

modules/angular2/src/core/compiler/view_manager.ts

@@ -30,6 +30,10 @@ export class AppViewManager {
     return hostView.elementInjectors[location.boundElementIndex].getViewContainerRef();
   }
 
+  getHostElement(hostViewRef: ViewRef): ElementRef {
+    return internalView(hostViewRef).elementRefs[0];
+  }
+
   /**
    * Returns an ElementRef for the element with the given variable name
    * in the component view of the component at the provided ElementRef.

modules/angular2/src/core/compiler/view_manager_utils.ts

@@ -165,7 +165,7 @@ export class AppViewManagerUtils {
     if (isPresent(elementInjector.getDirectiveVariableBindings())) {
       MapWrapper.forEach(elementInjector.getDirectiveVariableBindings(), (directiveIndex, name) => {
         if (isBlank(directiveIndex)) {
-          view.locals.set(name, elementInjector.getElementRef().domElement);
+          view.locals.set(name, elementInjector.getElementRef().nativeElement);
         } else {
           view.locals.set(name, elementInjector.getDirectiveAtIndex(directiveIndex));
         }