fix(ElementBinderBuilder): properly bind to web component properties

Fixes #776

Closes #1024

modules/angular2/src/core/compiler/pipeline/element_binder_builder.js

@@ -93,17 +93,6 @@ function styleSetterFactory(styleName:string, stylesuffix:string) {
   return setterFn;
 }
 
-const ROLE_ATTR = 'role';
-function roleSetter(element, value) {
-  if (isString(value)) {
-    DOM.setAttribute(element, ROLE_ATTR, value);
-  } else {
-    DOM.removeAttribute(element, ROLE_ATTR);
-    if (isPresent(value)) {
-      throw new BaseException("Invalid role attribute, only string values are allowed, got '" + stringify(value) + "'");
-    }
-  }
-}
 
 /**
  * Creates the ElementBinders and adds watches to the
@@ -199,19 +188,19 @@ export class ElementBinderBuilder extends CompileStep {
         styleParts = StringWrapper.split(property, DOT_REGEXP);
         styleSuffix = styleParts.length > 2 ? ListWrapper.get(styleParts, 2) : '';
         setterFn = styleSetterFactory(ListWrapper.get(styleParts, 1), styleSuffix);
+      } else if (StringWrapper.equals(property, 'innerHtml')) {
+        setterFn = (element, value) => DOM.setInnerHTML(element, value);
       } else {
         property = this._resolvePropertyName(property);
-        //TODO(pk): special casing innerHtml, see: https://github.com/angular/angular/issues/789
+        var propertySetterFn = reflector.setter(property);
-        if (StringWrapper.equals(property, 'innerHTML')) {
+        setterFn = function(receiver, value) {
-          setterFn = (element, value) => DOM.setInnerHTML(element, value);
+          if (DOM.hasProperty(receiver, property)) {
-        } else if (DOM.hasProperty(compileElement.element, property) || StringWrapper.equals(property, 'innerHtml')) {
+            return propertySetterFn(receiver, value);
-          setterFn = reflector.setter(property);
+          }
         }
       }
 
-      if (isPresent(setterFn)) {
+      protoView.bindElementProperty(expression.ast, property, setterFn);
-        protoView.bindElementProperty(expression.ast, property, setterFn);
-      }
     });
   }
 

modules/angular2/test/core/compiler/integration_spec.js

@@ -186,6 +186,20 @@ export function main() {
         });
       }));
 
+      it('should ignore bindings to unknown properties', inject([AsyncTestCompleter], (async) => {
+        tplResolver.setTemplate(MyComp, new Template({inline: '<div unknown="{{ctxProp}}"></div>'}));
+
+        compiler.compile(MyComp).then((pv) => {
+          createView(pv);
+
+          ctx.ctxProp = 'Some value';
+          cd.detectChanges();
+          expect(DOM.hasProperty(view.nodes[0], 'unknown')).toBeFalsy();
+
+          async.done();
+        });
+      }));
+
       it('should consume directive watch expression change.', inject([AsyncTestCompleter], (async) => {
         var tpl =
           '<div>' +

modules/benchmarks/src/compiler/compiler_benchmark.js

@@ -78,6 +78,9 @@ function setupReflector() {
     "value0": (a,v) => a.value0 = v, "value1": (a,v) => a.value1 = v,
     "value2": (a,v) => a.value2 = v, "value3": (a,v) => a.value3 = v, "value4": (a,v) => a.value4 = v,
 
+    "attr0": (a,v) => a.attr0 = v, "attr1": (a,v) => a.attr1 = v,
+    "attr2": (a,v) => a.attr2 = v, "attr3": (a,v) => a.attr3 = v, "attr4": (a,v) => a.attr4 = v,
+
     "prop": (a,v) => a.prop = v
   });
 }

modules/benchmarks/src/naive_infinite_scroll/index.js

@@ -139,6 +139,9 @@ export function setupReflector() {
     'aatStatusWidth': (o, v) => o.aatStatusWidth = v,
     'bundles': (o, v) => o.bundles = v,
     'bundlesWidth': (o, v) => o.bundlesWidth = v,
+    'if': (o, v) => {},
+    'of': (o, v) => {},
+    'cellWidth': (o, v) => o.cellWidth = v,
     evt: (o, v) => null,
     'style': (o, m) => {
       //if (isBlank(m)) return;

modules/benchmarks/src/tree/tree_benchmark.js

@@ -206,6 +206,7 @@ function setupReflector() {
     'initData': (a,v) => a.initData = v,
     'data': (a,v) => a.data = v,
     'condition': (a,v) => a.condition = v,
+    'if': (a,v) => a['if'] = v,
   });
 }