diff --git a/polymer.html b/polymer.html
index 0bdf74b521..fe5ed6732b 100644
--- a/polymer.html
+++ b/polymer.html
@@ -57,3 +57,4 @@
 <link rel="import" href="src/lib/template/x-template.html">
 <link rel="import" href="src/lib/template/x-repeat.html">
 <link rel="import" href="src/lib/template/x-array-selector.html">
+<link rel="import" href="src/lib/template/x-if.html">
diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
index fdd863fe16..344b7034dd 100644
--- a/src/lib/annotations/annotations.html
+++ b/src/lib/annotations/annotations.html
@@ -142,12 +142,29 @@
             // TODO(sjmiles): simply altering the .content reference didn't
             // work (there was some confusion, might need verification)
             var content = document.createDocumentFragment();
+            content._annotes = this.parseAnnotations(node);
             content.appendChild(node.content);
+            // Special-case treatment of 'parent.*' props for nested templates
+            // Automatically bind `prop` on host to `_parent_prop` on template
+            // for any `parent.prop`'s encountered in template binding; it is
+            // responsibility of the template implementation to forward
+            // these properties as appropriate
+            var bindings = [];
+            this._discoverTemplateParentProps(content);
+            for (var prop in content._parentProps) {
+              bindings.push({
+                index: i,
+                kind: 'property',
+                mode: '{',
+                name: '_parent_' + prop,
+                value: prop
+              });
+            }
             // TODO(sjmiles): using `nar` to avoid unnecessary allocation;
             // in general the handling of these arrays needs some cleanup 
             // in this module
             list.push({
-              bindings: Polymer.nar,
+              bindings: bindings,
               events: Polymer.nar,
               templateContent: content,
               parent: annote,
@@ -164,6 +181,42 @@
       }
     },
 
+    // Finds all parent.* properties in template content and stores
+    // the path members in content._parentPropChain, which is an array
+    // of maps listing the properties of parent templates required at
+    // each level. Each outer template merges inner _parentPropChains to
+    // propagate inner parent property needs to outer templates.
+    // The top-level parent props from the chain (corresponding to this 
+    // template) are stored in content._parentProps.
+    _discoverTemplateParentProps: function(content) {
+      var chain = content._parentPropChain = [];
+      content._annotes.forEach(function(n) {
+        // Find all bindings to parent.* and spread them into _parentPropChain
+        n.bindings.forEach(function(b) {
+          var m;
+          if (m = b.value.match(/parent\.((parent\.)*[^.]*)/)) {
+            var parts = m[1].split('.');
+            for (var i=0; i<parts.length; i++) {
+              var pp = chain[i] || (chain[i] = {});
+              pp[parts[i]] = true;
+            }
+          }
+        });
+        // Merge child _parentPropChain[n+1] into this _parentPropChain[n]
+        if (n.templateContent) {
+          var tpp = n.templateContent._parentPropChain;
+          for (var i=1; i<tpp.length; i++) {
+            if (tpp[i]) {
+              var pp = chain[i-1] || (chain[i-1] = {});
+              Polymer.Base.simpleMixin(pp, tpp[i]);              
+            }
+          }
+        }
+      });
+      // Store this template's parentProps map
+      content._parentProps = chain[0];
+    },
+
     // add annotation data from attributes to the `annotation` for node `node`
     // TODO(sjmiles): the distinction between an `annotation` and 
     // `annotation data` is not as clear as it could be
diff --git a/src/lib/bind/effects.html b/src/lib/bind/effects.html
index 2175c306b8..f9b8201daa 100644
--- a/src/lib/bind/effects.html
+++ b/src/lib/bind/effects.html
@@ -36,6 +36,11 @@
       this._notifyChange(source);
     },
 
+    // Raw effect for extension; info.function is an actual function
+    functionEffect: function(source, value, info, old) {
+      info.function.call(this, source, value, info, old);
+    },
+
     observerEffect: function(source, value, info, old) {
       //console.log(value, info);
       if (info.property) {
@@ -58,8 +63,10 @@
     annotatedComputationEffect: function(source, value, info) {
       var args = Polymer.Bind._marshalArgs(this._data, info.args);
       if (args) {
-        var value = this[info.methodName].apply(this, args);
-        this._applyEffectValue(value, info);
+        var computedHost = this._rootDataHost || this;
+        var computedvalue = 
+          computedHost[info.methodName].apply(computedHost, args);
+        this._applyEffectValue(computedvalue, info);
       }
     },
 
diff --git a/src/lib/template/templatizer.html b/src/lib/template/templatizer.html
index b190163d04..60245c6f8e 100644
--- a/src/lib/template/templatizer.html
+++ b/src/lib/template/templatizer.html
@@ -13,6 +13,7 @@
   Polymer.Templatizer = {
 
     templatize: function(template) {
+      this._templatized = template;
       // TODO(sjmiles): supply _alternate_ content reference missing from root
       // templates (not nested). `_content` exists to provide content sharing
       // for nested templates.
@@ -23,29 +24,31 @@
       if (template._content._ctor) {
         this.ctor = template._content._ctor;
         //console.log('Templatizer.templatize: using memoized archetype');
+        // forward parent properties to archetype
+        this._prepParentProperties(this.ctor.prototype);
         return;
       }
       // `archetype` is the prototype of the anonymous
       // class created by the templatizer 
       var archetype = Object.create(Polymer.Base);
-      archetype.host = this;
-      archetype.contentHost = this._getContentHost();
+      var rootDataHost = this._getRootDataHost();
+      archetype._rootDataHost = rootDataHost;
       // normally Annotations.parseAnnotations(template) but
       // archetypes do special caching
       this.customPrepAnnotations(archetype, template);
       // setup accessors
       archetype._prepEffects();
+      // forward parent properties to archetype
+      this._prepParentProperties(archetype);
       // late-binds archetype.listen to host.listen; h.l doesn't exist yet
-      archetype.listen = function() { 
-        this.listen.apply(this, arguments);
-      }.bind(this.host);
+      archetype.listen = rootDataHost.listen.bind(rootDataHost);
 
       // boilerplate code
       archetype._notifyPath = this._notifyPathImpl;
       // boilerplate code
       var _constructor = this._constructorImpl;
-      var ctor = function TemplateInstance(model) {
-        _constructor.call(this, model);
+      var ctor = function TemplateInstance(model, host) {
+        _constructor.call(this, model, host);
       };
       // standard references
       ctor.prototype = archetype;
@@ -56,8 +59,22 @@
       this.ctor = ctor;
     },
 
-    _getContentHost: function() {
-      return (this.host && this.host.contentHost) || this.host;
+    _getRootDataHost: function() {
+      return (this.dataHost && this.dataHost._rootDataHost) || this.dataHost;
+    },
+
+    _getAllStampedChildren: function(children) {
+      children = children || [];
+      if (this._getStampedChildren) {
+        var c$ = this._getStampedChildren();
+        for (var i=0, c; c = c$[i]; i++) {
+          children.push(c);
+          if (c._getAllStampedChildren) {
+            c._getAllStampedChildren(children);
+          }
+        }
+      }
+      return children;
     },
 
     customPrepAnnotations: function(archetype, template) {
@@ -65,15 +82,8 @@
         archetype._template = template;
         var c = template._content;
         if (c) {
-          var contentHost = archetype.contentHost;
-          if (contentHost) {
-            Polymer.Annotations.prepElement = 
-              contentHost._prepElement.bind(contentHost);
-          }
-          archetype._annotes = c._annotes ||
-            Polymer.Annotations.parseAnnotations(template);
-          c._annotes = archetype._annotes;
-          Polymer.Annotations.prepElement = null;
+          archetype._annotes = c._annotes;
+          archetype._parentProps = c._parentProps;
         } 
         else {
           console.warn('no _content');
@@ -84,19 +94,94 @@
       }
     },
 
-    _notifyPathImpl: function() {
-      var pd = this.pathDelegate;
-      if (pd) {
-        var args = Array.prototype.slice.call(arguments);
-        args.unshift(this);
-        pd._notifyDelegatePath.apply(pd, args);
+    // Sets up accessors on the template to call abstract _forwardParentProp
+    // API that should be implemented by Templatizer users to get parent
+    // properties to their template instances.  These accessors are memoized 
+    // on the archetype and copied to instances.
+    _prepParentProperties: function(archetype) {
+      var parentProps = this._parentProps = archetype._parentProps;
+      if (this._forwardParentProp && parentProps) {
+        // Prototype setup (memoized on archetype)
+        var proto = archetype._parentPropProto;
+        if (!proto) {
+          proto = archetype._parentPropProto = Object.create(null);
+          if (this._templatized != this) {
+            // Assumption: if `this` isn't the template being templatized,
+            // assume that the template is not a Poylmer.Base, so prep it
+            // for binding
+            Polymer.Bind.prepareModel(proto);
+          }
+          // Create accessors for each parent prop that forward the property
+          // to template instances through abstract _forwardParentProp API
+          // that should be implemented by Templatizer users
+          for (var prop in parentProps) {
+            var parentProp = '_parent_' + prop;
+            var effects = [{
+              kind: 'function',
+              effect: { function: function(prop, source, value) {
+                this._forwardParentProp(prop, value);
+              }.bind(this, prop)}
+            }];
+            Polymer.Bind._createAccessors(proto, parentProp, effects);
+          }
+        }
+        // Instance setup
+        if (this._templatized != this) {
+          Polymer.Bind.prepareInstance(this._templatized);
+        }
+        this._extendTemplate(this._templatized, proto);
+      }
+    },
+
+    // Similar to Polymer.Base.extend, but retains any previously set instance
+    // values (_propertySet back on instance once accessor is installed)
+    _extendTemplate: function(template, proto) {
+      Object.getOwnPropertyNames(proto).forEach(function(n) {
+        var val = template[n];
+        var pd = Object.getOwnPropertyDescriptor(proto, n);
+        Object.defineProperty(template, n, pd);
+        if (val !== undefined) {
+          template._propertySet(n, val);
+        }
+      });
+    },
+
+    _notifyPathImpl: function(path, value) {
+      var p = path.match(/([^.]*)\.(([^.]*).*)/);
+                          // 'root.sub.path'
+      var root = p[1];    // 'root'
+      var sub = p[3];     // 'sub'
+      var subPath = p[2]; // 'sub.path'
+      // Notify host of parent.* path/property changes
+      var dataHost = this.dataHost;
+      if (root == 'parent') {
+        if (sub == subPath) {
+          dataHost.dataHost[sub] = value;
+        } else {
+          dataHost.notifyPath('_parent_' + subPath, value);
+        }        
+      }
+      // Extension point for Templatizer sub-classes
+      if (dataHost._forwardInstancePath) {
+        dataHost._forwardInstancePath.call(dataHost, this, root, subPath, value);
       }
     },
 
-    _constructorImpl: function(model) {
+    // Overrides Base notify-path module
+    _pathEffector: function(path, value, fromAbove) {
+      if (this._forwardParentPath) {
+        if (path.indexOf('_parent_') === 0) {
+          this._forwardParentPath(path.substring(8), value);
+        }
+      }
+      Polymer.Base._pathEffector.apply(this, arguments);
+    },
+
+    _constructorImpl: function(model, host) {
       this._setupConfigure(model);
-      this._pushHost(this.host);
+      this._pushHost(host);
       this.root = this.instanceTemplate(this._template);
+      this.root.__styleScoped = true;
       this._popHost();
       this._marshalAnnotatedNodes();
       this._marshalInstanceEffects();
@@ -105,7 +190,16 @@
     },
 
     stamp: function(model) {
-      return new this.ctor(model);
+      model = model || {};
+      if (this._parentProps) {
+        // TODO(kschaaf): Maybe this is okay
+        // model.parent = this.dataHost;
+        model.parent = model.parent || {};
+        for (var prop in this._parentProps) {
+          model.parent[prop] = this['_parent_' + prop];
+        }        
+      }
+      return new this.ctor(model, this);
     }
 
     // TODO(sorvell): note, using the template as host is ~5-10% faster if 
diff --git a/src/lib/template/x-if.html b/src/lib/template/x-if.html
index 59e757c767..60671d43a1 100644
--- a/src/lib/template/x-if.html
+++ b/src/lib/template/x-if.html
@@ -32,15 +32,13 @@
     properties: {
 
       'if': {
-        type: Boolean
-      },
-
-      item: {
-        type: Object
+        type: Boolean,
+        value: false
       },
 
       restamp: {
-        type: Boolean
+        type: Boolean,
+        value: false
       }
 
     },
@@ -50,28 +48,30 @@
     ],
 
     observers: {
-      'if item restamp': 'render'
+      'if restamp': 'render'
     },
 
     render: function() {
-      if (!this.ctor) {
-        this._wrapTextNodes(this._content);
-        this.templatize(this);
-      }
-      if (this.if) {
-        this._ensureInstance();
-      } else if (this.restamp) {
-        this._teardownInstance();
-      }
-      if (!this.restamp && this._instance) {
-        this._showHideInstance(this.if);
-      }
+      this.debounce('render', function() {
+        if (this.if) {
+          if (!this.ctor) {
+            this._wrapTextNodes(this._content);
+            this.templatize(this);
+          }
+          this._ensureInstance();
+        } else if (this.restamp) {
+          this._teardownInstance();
+        }
+        if (!this.restamp && this._instance) {
+          this._showHideInstance(this.if);
+        }
+      });
     },
 
     _ensureInstance: function() {
       if (!this._instance) {
         // TODO(sorvell): pickup stamping logic from x-repeat
-        this._instance = this.stamp(this.item);
+        this._instance = this.stamp();
         var root = this._instance.root;
         this._instance._children = Array.prototype.slice.call(root.childNodes);
         // TODO(sorvell): this incantation needs to be simpler.
@@ -102,12 +102,36 @@
       }
     },
 
+    // Implements extension point from Templatizer mixin
+    _getStampedChildren: function() {
+      return this._instance._children;
+    },
+
     _showHideInstance: function(showing) {
-      this._instance._children.forEach(function(n) {
+      this._getAllStampedChildren().forEach(function(n) {
         if (n.setAttribute) {
           this.serializeValueToAttribute(!showing, 'hidden', n);
         }
       }, this);
+    },
+
+    // Implements extension point from Templatizer mixin
+    // Called as side-effect of a host property change, responsible for
+    // notifying parent.<prop> path change on instance
+    _forwardParentProp: function(prop, value) {
+      if (this._instance) {
+        this._instance.parent[prop] = value;
+        this._instance.notifyPath('parent.' + prop, value, true);
+      }
+    },
+
+    // Implements extension point from Templatizer
+    // Called as side-effect of a host path change, responsible for
+    // notifying parent.<path> path change on each row
+    _forwardParentPath: function(path, value) {
+      if (this._instance) {
+        this._instance.notifyPath('parent.' + path, value, true);
+      }
     }
 
   });
diff --git a/src/lib/template/x-repeat.html b/src/lib/template/x-repeat.html
index 584ffbaa3d..74e968f8bd 100644
--- a/src/lib/template/x-repeat.html
+++ b/src/lib/template/x-repeat.html
@@ -195,7 +195,7 @@
 
     _itemsChanged: function(items, old, path) {
       if (path) {
-        this._notifyElement(path, items);
+        this._forwardItemPath(path, items);
         this._checkObservedPaths(path);
       } else {
         if (old) {
@@ -204,8 +204,8 @@
         if (items) {
           this._observeCollection(items);
           this.debounce('render', this.render);
-        }
-      }          
+        }        
+      }
     },
 
     _checkObservedPaths: function(path) {
@@ -260,12 +260,13 @@
         var key = keys[i];
         var item = c.getItem(key);
         var row = this.rows[i];
+        rowForKey[key] = i;
         if (!row) {
           this.rows.push(row = this._insertRow(i, null, item));
         }
         row.item = item;
         row.key = key;
-        rowForKey[key] = i;
+        row.index = i;
       }
       // Remove extra
       for (; i<this.rows.length; i++) {
@@ -425,15 +426,15 @@
       var beforeRow = this.rows[idx];
       var beforeNode = beforeRow ? beforeRow._children[0] : this;
       var parentNode = Polymer.dom(this).parentNode;
-      row.root.__styleScoped = true;
       Polymer.dom(parentNode).insertBefore(row.root, beforeNode);
       return row;
     },
 
     _generateRow: function(idx, item) {
       var row = this.stamp({
-        item: item,
-        pathDelegate: this
+        index: idx,
+        key: this.collection.getKey(item),
+        item: item
       });
       // each row is a document fragment which is lost when we appendChild,
       // so we have to track each child individually
@@ -448,11 +449,54 @@
       return row;
     },
 
-    _notifyDelegatePath: function(row, path, value) {
-      this.notifyPath(path.replace('item', 'items.' + row.key), value);
+    // Implements extension point from Templatizer mixin
+    _getStampedChildren: function() {
+      var children = [];
+      if (this.rows) {
+        for (var i=0; i<this.rows.length; i++) {
+          var c = this.rows[i]._children;
+          for (var j=0; j<c.length; j++)
+          children.push(c[j]);
+        }        
+      }
+      return children;
+    },
+
+    // Implements extension point from Templatizer
+    // Called as a side effect of a template instance path change, responsible 
+    // for notifying items.<key-for-row>.<path> change up to host
+    _forwardInstancePath: function(row, root, subPath, value) {
+      if (root == 'item') {
+        this.notifyPath('items.' + row.key + '.' + subPath, value);
+      }
+    },
+
+    // Implements extension point from Templatizer mixin
+    // Called as side-effect of a host property change, responsible for
+    // notifying parent.<prop> path change on each row
+    _forwardParentProp: function(prop, value) {
+      if (this.rows) {
+        this.rows.forEach(function(row) {
+          row.parent[prop] = value;
+          row.notifyPath('parent.' + prop, value, true);
+        }, this);        
+      }
+    },
+
+    // Implements extension point from Templatizer
+    // Called as side-effect of a host path change, responsible for
+    // notifying parent.<path> path change on each row
+    _forwardParentPath: function(path, value) {
+      if (this.rows) {
+        this.rows.forEach(function(row) {
+          row.notifyPath('parent.' + path, value, true);
+        }, this);        
+      }
     },
 
-    _notifyElement: function(path, value) {
+    // Called as a side effect of a host items.<key>.<path> path change,
+    // responsible for notifying item.<path> changes to row for key
+    _forwardItemPath: function(path, value) {
       if (this._rowForKey) {
         // 'items.'.length == 6
         var dot = path.indexOf('.', 6);
diff --git a/src/mini/ready.html b/src/mini/ready.html
index 6af602c195..e73d2a58d3 100644
--- a/src/mini/ready.html
+++ b/src/mini/ready.html
@@ -1,180 +1,188 @@
-<!--
-@license
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<script>
-
-  /**
-   * Provides `ready` lifecycle callback which is called parent to child.
-   *
-   * This can be useful in a number of cases. Here are some examples:
-   *
-   * Setting a default property value that should have a side effect: To ensure
-   * the side effect, an element must set a default value no sooner than
-   * `created`; however, since `created` flows child to host, this is before the
-   * host has had a chance to set a property value on the child. The `ready`
-   * method solves this problem since it's called host to child.
-   *
-   * Dom distribution: To support reprojection efficiently, it's important to 
-   * distribute from host to child in one shot. The `attachedCallback` mostly
-   * goes in the desired order except for elements that are in dom to start; in
-   * this case, all children are attached before the host element. Ready also
-   * addresses this case since it's guaranteed to be called host to child.
-   *
-   * @class standard feature: ready
-   */
-
-(function() {
-
-  var baseAttachedCallback = Polymer.Base.attachedCallback;
-  var baseDetachedCallback = Polymer.Base.detachedCallback;
-
-  Polymer.Base.addFeature({
-
-    hostStack: [],
-    _readied: false,
-    _attachedPending: false,
-
-    // for overriding
-    configure: function() {
-    },
-
-    // for overriding
-    ready: function() {
-    },
-
-    /**
-      Returns the host of the local dom in which this element exists.
-      This is a shorthand for Polymer.dom(this).getOwnerRoot().host
-    */
-    get host() {
-      return this._host || (this._host = this._queryHost());
-    },
-
-    set host(value) {
-      this._host = value;
-    },
-
-    _queryHost: function(node) {
-      var ownerRoot = Polymer.dom(this).getOwnerRoot();
-      return ownerRoot && ownerRoot.host;
-    },
-
-    // NOTE: The concept of 'host' is overloaded. There are two different
-    // notions:
-    // 1. an element hosts the elements in its local dom root.
-    // 2. an element hosts the elements on which it configures data.
-    // Practially, these notions are almost always coincident.
-    // Some special elements like templates may separate them.
-    // In order not to over-emphaisize this technical difference, we expose 
-    // one concept to the user and it maps to the dom-related meaning of host.
-    //
-    // 1. set this element's `host` and push this element onto the `host`'s
-    // list of `client` elements
-    // 2. establish this element as the current hosting element (allows 
-    // any elements we stamp to easily set host to us).
-    _pushHost: function(host) {
-      this.host = host = host || 
-        Polymer.Base.hostStack[Polymer.Base.hostStack.length-1];
-      if (host && host._clients) {
-        host._clients.push(this);
-      }
-      this._beginHost();
-    },
-
-    _beginHost: function() {
-      Polymer.Base.hostStack.push(this);
-      if (!this._clients) {
-        this._clients = [];
-      }
-    },
-
-    _popHost: function() {
-      // this element is no longer the current hosting element
-      Polymer.Base.hostStack.pop();
-    },
-
-    _readyContent: function() {
-      if (this._canReady()) {
-        this._initializeContent();
-      }
-    },
-
-    _canReady: function() {
-      return !this._readied && (!this.host || this.host._readied);
-    },
-
-    _initializeContent: function() {
-      // prepare root
-      this._setupRoot();
-      // logically distribute self
-      this._beginDistribute();
-      // send data configuration signal
-      this._configure();
-      // now fully prepare localChildren
-      var c$ = this._clients;
-      for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
-        c._initializeContent();
-      }
-      // perform actual dom composition
-      this._finishDistribute();
-      // ensure elements are attached if they are in the dom at ready time
-      // helps normalize attached ordering between native and polyfill ce.
-      // TODO(sorvell): worth perf cost? ~6%
-      // if (!Polymer.Settings.useNativeCustomElements) {
-      //   CustomElements.takeRecords();
-      // }
-      // send ready signal
-      this._ready();
-      // reset _host as it needs to be established by local dom after data
-      // configuration
-      this.host = null;
-      this._clients = null;
-    },
-
-    // calls `configure`
-    // note: called host -> localChild
-    _configure: function() {
-      this.configure();
-    },
-
-    // mark readied and call `ready`
-    // note: called localChildren -> host
-    _ready: function() {
-      this._readied = true;
-      this._beforeReady();
-      this.ready();
-      if (this._attachedPending) {
-        this._attachedPending = false;
-        this.attachedCallback();
-      }
-    },
-
-    // for system overriding
-    _beforeReady: function() {},
-
-    // normalize lifecycle: ensure attached occurs only after ready.
-    attachedCallback: function() {
-      if (this._readied) {
-        baseAttachedCallback.call(this);
-      } else {
-        this._attachedPending = true;
-      }
-    },
-
-    detachedCallback: function() {
-      // uncache host so it will be calculated again.
-      this.host = null;
-      baseDetachedCallback.call(this);
-    }
-
-  });
-
-})();
-
-</script>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<script>
+
+  /**
+   * Provides `ready` lifecycle callback which is called parent to child.
+   *
+   * This can be useful in a number of cases. Here are some examples:
+   *
+   * Setting a default property value that should have a side effect: To ensure
+   * the side effect, an element must set a default value no sooner than
+   * `created`; however, since `created` flows child to host, this is before the
+   * host has had a chance to set a property value on the child. The `ready`
+   * method solves this problem since it's called host to child.
+   *
+   * Dom distribution: To support reprojection efficiently, it's important to 
+   * distribute from host to child in one shot. The `attachedCallback` mostly
+   * goes in the desired order except for elements that are in dom to start; in
+   * this case, all children are attached before the host element. Ready also
+   * addresses this case since it's guaranteed to be called host to child.
+   *
+   * @class standard feature: ready
+   */
+
+(function() {
+
+  var baseAttachedCallback = Polymer.Base.attachedCallback;
+  var baseDetachedCallback = Polymer.Base.detachedCallback;
+
+  Polymer.Base.addFeature({
+
+    hostStack: [],
+    _readied: false,
+    _attachedPending: false,
+
+    // for overriding
+    configure: function() {
+    },
+
+    // for overriding
+    ready: function() {
+    },
+
+    /**
+      Returns the host of the local dom in which this element exists.
+      This is a shorthand for Polymer.dom(this).getOwnerRoot().host
+    */
+    get host() {
+      return this._host || (this._host = this._queryHost());
+    },
+
+    set host(value) {
+      this._host = value;
+    },
+
+    _queryHost: function(node) {
+      var ownerRoot = Polymer.dom(this).getOwnerRoot();
+      return ownerRoot && ownerRoot.host;
+    },
+
+    // NOTE: The concept of 'host' is overloaded. There are two different
+    // notions:
+    // 1. an element hosts the elements in its local dom root.
+    // 2. an element hosts the elements on which it configures data.
+    // Practially, these notions are almost always coincident.
+    // Some special elements like templates may separate them.
+    // In order not to over-emphaisize this technical difference, we expose 
+    // one concept to the user and it maps to the dom-related meaning of host.
+    //
+    // 1. set this element's `host` and push this element onto the `host`'s
+    // list of `client` elements
+    // 2. establish this element as the current hosting element (allows 
+    // any elements we stamp to easily set host to us).
+    _pushHost: function(host) {
+      // this.host reflects the parent element whose "local DOM"
+      // this element is contained within. This may change if the element
+      // is appended to a different parent.
+      this.host = host = host || 
+        Polymer.Base.hostStack[Polymer.Base.hostStack.length-1];
+      // this.dataHost reflects the parent element who manages
+      // any bindings for the element.  Only elements originally
+      // stamped from Polymer templates have a dataHost, and this
+      // never changes
+      this.dataHost = host;
+      if (host && host._clients) {
+        host._clients.push(this);
+      }
+      this._beginHost();
+    },
+
+    _beginHost: function() {
+      Polymer.Base.hostStack.push(this);
+      if (!this._clients) {
+        this._clients = [];
+      }
+    },
+
+    _popHost: function() {
+      // this element is no longer the current hosting element
+      Polymer.Base.hostStack.pop();
+    },
+
+    _readyContent: function() {
+      if (this._canReady()) {
+        this._initializeContent();
+      }
+    },
+
+    _canReady: function() {
+      return !this._readied && (!this.host || this.host._readied);
+    },
+
+    _initializeContent: function() {
+      // prepare root
+      this._setupRoot();
+      // logically distribute self
+      this._beginDistribute();
+      // send data configuration signal
+      this._configure();
+      // now fully prepare localChildren
+      var c$ = this._clients;
+      for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
+        c._initializeContent();
+      }
+      // perform actual dom composition
+      this._finishDistribute();
+      // ensure elements are attached if they are in the dom at ready time
+      // helps normalize attached ordering between native and polyfill ce.
+      // TODO(sorvell): worth perf cost? ~6%
+      // if (!Polymer.Settings.useNativeCustomElements) {
+      //   CustomElements.takeRecords();
+      // }
+      // send ready signal
+      this._ready();
+      // reset _host as it needs to be established by local dom after data
+      // configuration
+      this.host = null;
+      this._clients = null;
+    },
+
+    // calls `configure`
+    // note: called host -> localChild
+    _configure: function() {
+      this.configure();
+    },
+
+    // mark readied and call `ready`
+    // note: called localChildren -> host
+    _ready: function() {
+      this._readied = true;
+      this._beforeReady();
+      this.ready();
+      if (this._attachedPending) {
+        this._attachedPending = false;
+        this.attachedCallback();
+      }
+    },
+
+    // for system overriding
+    _beforeReady: function() {},
+
+    // normalize lifecycle: ensure attached occurs only after ready.
+    attachedCallback: function() {
+      if (this._readied) {
+        baseAttachedCallback.call(this);
+      } else {
+        this._attachedPending = true;
+      }
+    },
+
+    detachedCallback: function() {
+      // uncache host so it will be calculated again.
+      this.host = null;
+      baseDetachedCallback.call(this);
+    }
+
+  });
+
+})();
+
+</script>
diff --git a/src/standard/notify-path.html b/src/standard/notify-path.html
index c6376cd708..5372921a98 100644
--- a/src/standard/notify-path.html
+++ b/src/standard/notify-path.html
@@ -1,260 +1,260 @@
-<!--
-@license
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<link rel="import" href="../lib/case-map.html">
-<script>
-
-  /**
-   * Changes to an object sub-field (aka "path") via a binding
-   * (e.g. `<x-foo value="{{item.subfield}}"`) will notify other elements bound to
-   * the same object automatically.
-   *
-   * When modifying a sub-field of an object imperatively
-   * (e.g. `this.item.subfield = 42`), in order to have the new value propagated
-   * to other elements, a special `setPathValue(path, value)` API is provided.
-   * `setPathValue` sets the object field at the path specified, and then notifies the
-   * binding system so that other elements bound to the same path will update.
-   *
-   * Example:
-   *
-   *     Polymer({
-   *
-   *       is: 'x-date',
-   *
-   *       properties: {
-   *         date: {
-   *           type: Object,
-   *           notify: true
-   *          }
-   *       },
-   *
-   *       attached: function() {
-   *         this.date = {};
-   *         setInterval(function() {
-   *           var d = new Date();
-   *           // Required to notify elements bound to date of changes to sub-fields
-   *           // this.date.seconds = d.getSeconds(); <-- Will not notify
-   *           this.setPathValue('date.seconds', d.getSeconds());
-   *           this.setPathValue('date.minutes', d.getMinutes());
-   *           this.setPathValue('date.hours', d.getHours() % 12);
-   *         }.bind(this), 1000);
-   *       }
-   *
-   *     });
-   *
-   *  Allows bindings to `date` sub-fields to update on changes:
-   *
-   *     <x-date date="{{date}}"></x-date>
-   *
-   *     Hour: <span>{{date.hours}}</span>
-   *     Min:  <span>{{date.minutes}}</span>
-   *     Sec:  <span>{{date.seconds}}</span>
-   *
-   * @class data feature: path notification
-   */
-
-  Polymer.Base.addFeature({
-    /**
-      Notify that a path has changed. For example:
-
-          this.item.user.name = 'Bob';
-          this.notifyPath('item.user.name', this.item.user.name);
-
-      Returns true if notification actually took place, based on
-      a dirty check of whether the new value was already known
-    */
-    notifyPath: function(path, value, fromAbove) {
-      var old = this._propertySet(path, value);
-      // manual dirty checking for now...
-      if (old !== value) {
-        //console.group(this.localName + '#' + this.id + ' ' + path);
-        // Take path effects at this level for exact path matches,
-        // and notify down for any bindings to a subset of this path
-        this._pathEffector(path, value);
-        // Send event to notify the path change upwards
-        // Optimization: don't notify up if we know the notification
-        // is coming from above already (avoid wasted event dispatch)
-        if (!fromAbove) {
-          // TODO(sorvell): should only notify if notify: true?
-          this._notifyPath(path, value);
-        }
-        //console.groupEnd(this.localName + '#' + this.id + ' ' + path);
-      }
-    },
-
-    /**
-      Convienence method for setting a value to a path and calling
-      notify path
-    */
-    setPathValue: function(path, value) {
-      var parts = path.split('.');
-      if (parts.length > 1) {
-        var last = parts.pop();
-        var prop = this;
-        while (parts.length) {
-          prop = prop[parts.shift()];
-          if (!prop) {
-            return;
-          }
-        }
-        // TODO(kschaaf): want dirty-check here?
-        // if (prop[last] !== value) {
-          prop[last] = value;
-          this.notifyPath(path, value);
-        // }
-      } else {
-        this[path] = value;
-      }
-    },
-
-    getPathValue: function(path, root) {
-      var parts = path.split('.');
-      var last = parts.pop();
-      var prop = root || this;
-      while (parts.length) {
-        prop = prop[parts.shift()];
-        if (!prop) {
-          return;
-        }
-      }
-      return prop[last];
-    },
-
-    addPathObserver: function(path, method) {
-      var fx$ = this._pathEffects || (this._pathEffects = []);
-      var match = path.indexOf('.*') == (path.length-2);
-      if (match) {
-        path = path.slice(0, -2);
-      }
-      fx$.push({path: path, match: match, method: method});
-    },
-
-    // TODO(kschaaf): This machine can be optimized to memoize compiled path
-    // effectors as new paths are notified for performance, since it involves
-    // a fair amount of runtime lookup
-    _pathEffector: function(path, value) {
-      // get root property
-      var model = this._modelForPath(path);
-      // search property effects of the root property for 'annotation' effects
-      var fx$ = this._propertyEffects[model];
-      if (fx$) {
-        fx$.forEach(function(fx) {
-          if (fx.kind === 'annotation') {
-            // locate the bound node
-            var n = this._nodeForBinding(fx.effect);
-            if (n) {
-              // perform the effect
-              this._performAnnotationPathEffect(n, path, value, fx.effect);
-            }
-          }
-        }, this);
-      }
-      // iterate and perform _pathEffects matching path
-      if (this._pathEffects) {
-        this._pathEffects.forEach(function(fx) {
-          this._performPathEffect(path, value, fx);
-        }, this);
-      }
-      // notify runtime-bound paths
-      if (this._boundPaths) {
-        this._notifyBoundPaths(path, value);
-      }
-    },
-
-    _nodeForBinding: function(info) {
-      return info.id ? this.$[info.id] : this._nodes[info.index];
-    },
-
-    _performAnnotationPathEffect: function(node, path, value, effect) {
-      if (effect.value === path || effect.value.indexOf(path + '.') === 0) {
-        // TODO(sorvell): ideally the effect function is on this prototype
-        // so we don't have to call it like this.
-        Polymer.Bind.annotationEffect.call(this, path, value, effect);
-        // path == item.stuff.count
-        // value == item.stuff
-        // name == zizz
-        // calls effect n.notifyPath for zizz.count
-      } else if ((path.indexOf(effect.value + '.') === 0) &&
-                  node.notifyPath && !effect.negate) {
-        var p = this._fixPath(effect.name , effect.value, path);
-        node.notifyPath(p, value, true);
-      }
-    },
-
-    _performPathEffect: function(path, value, fx) {
-      if (fx.path == path || (fx.match && path.indexOf(fx.path) === 0)) {
-        var fn = this[fx.method];
-        if (fn) {
-          // TODO(kschaaf): sending null for old; no good way to get it?
-          fn.call(this, value, null, path);
-        }
-      }
-    },
-
-    bindPaths: function(to, from) {
-      this._boundPaths = this._boundPaths || {};
-      if (from) {
-        this._boundPaths[to] = from;
-        // this.setPathValue(to, this.getPathValue(from));
-      } else {
-        this.unbindPath(to);
-        // this.setPathValue(to, from);
-      }
-    },
-
-    unbindPaths: function(path) {
-      if (this._boundPaths) {
-        delete this._boundPaths[path];
-      }
-    },
-
-    _notifyBoundPaths: function(path, value) {
-      var from, to;
-      for (var a in this._boundPaths) {
-        var b = this._boundPaths[a];
-        if (path.indexOf(a + '.') == 0) {
-          from = a;
-          to = b;
-          break;
-        }
-        if (path.indexOf(b + '.') == 0) {
-          from = b;
-          to = a;
-          break;
-        }
-      }
-      if (from && to) {
-        var p = this._fixPath(to, from, path);
-        this.notifyPath(p, value);
-      }
-    },
-
-    _fixPath: function(property, root, path) {
-      return property + path.slice(root.length);
-    },
-
-    _notifyPath: function(path, value) {
-      var rootName = this._modelForPath(path);
-      var dashCaseName = Polymer.CaseMap.camelToDashCase(rootName);
-      var eventName = dashCaseName + this._EVENT_CHANGED;
-      this.fire(eventName, {
-        path: path,
-        value: value
-      }, null, false);
-    },
-
-    _modelForPath: function(path) {
-      return path.split('.').shift();
-    },
-
-    _EVENT_CHANGED: '-changed',
-
-  });
-
-</script>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../lib/case-map.html">
+<script>
+
+  /**
+   * Changes to an object sub-field (aka "path") via a binding
+   * (e.g. `<x-foo value="{{item.subfield}}"`) will notify other elements bound to
+   * the same object automatically.
+   *
+   * When modifying a sub-field of an object imperatively
+   * (e.g. `this.item.subfield = 42`), in order to have the new value propagated
+   * to other elements, a special `setPathValue(path, value)` API is provided.
+   * `setPathValue` sets the object field at the path specified, and then notifies the
+   * binding system so that other elements bound to the same path will update.
+   *
+   * Example:
+   *
+   *     Polymer({
+   *
+   *       is: 'x-date',
+   *
+   *       properties: {
+   *         date: {
+   *           type: Object,
+   *           notify: true
+   *          }
+   *       },
+   *
+   *       attached: function() {
+   *         this.date = {};
+   *         setInterval(function() {
+   *           var d = new Date();
+   *           // Required to notify elements bound to date of changes to sub-fields
+   *           // this.date.seconds = d.getSeconds(); <-- Will not notify
+   *           this.setPathValue('date.seconds', d.getSeconds());
+   *           this.setPathValue('date.minutes', d.getMinutes());
+   *           this.setPathValue('date.hours', d.getHours() % 12);
+   *         }.bind(this), 1000);
+   *       }
+   *
+   *     });
+   *
+   *  Allows bindings to `date` sub-fields to update on changes:
+   *
+   *     <x-date date="{{date}}"></x-date>
+   *
+   *     Hour: <span>{{date.hours}}</span>
+   *     Min:  <span>{{date.minutes}}</span>
+   *     Sec:  <span>{{date.seconds}}</span>
+   *
+   * @class data feature: path notification
+   */
+
+  Polymer.Base.addFeature({
+    /**
+      Notify that a path has changed. For example:
+
+          this.item.user.name = 'Bob';
+          this.notifyPath('item.user.name', this.item.user.name);
+
+      Returns true if notification actually took place, based on
+      a dirty check of whether the new value was already known
+    */
+    notifyPath: function(path, value, fromAbove) {
+      var old = this._propertySet(path, value);
+      // manual dirty checking for now...
+      if (old !== value) {
+        // console.group((this.localName || this.dataHost.id + '-' + this.dataHost.dataHost.index) + '#' + (this.id || this.index) + ' ' + path, value);
+        // Take path effects at this level for exact path matches,
+        // and notify down for any bindings to a subset of this path
+        this._pathEffector(path, value);
+        // Send event to notify the path change upwards
+        // Optimization: don't notify up if we know the notification
+        // is coming from above already (avoid wasted event dispatch)
+        if (!fromAbove) {
+          // TODO(sorvell): should only notify if notify: true?
+          this._notifyPath(path, value);
+        }
+        // console.groupEnd((this.localName || this.dataHost.id + '-' + this.dataHost.dataHost.index) + '#' + (this.id || this.index) + ' ' + path, value);
+      }
+    },
+
+    /**
+      Convienence method for setting a value to a path and calling
+      notify path
+    */
+    setPathValue: function(path, value) {
+      var parts = path.split('.');
+      if (parts.length > 1) {
+        var last = parts.pop();
+        var prop = this;
+        while (parts.length) {
+          prop = prop[parts.shift()];
+          if (!prop) {
+            return;
+          }
+        }
+        // TODO(kschaaf): want dirty-check here?
+        // if (prop[last] !== value) {
+          prop[last] = value;
+          this.notifyPath(path, value);
+        // }
+      } else {
+        this[path] = value;
+      }
+    },
+
+    getPathValue: function(path, root) {
+      var parts = path.split('.');
+      var last = parts.pop();
+      var prop = root || this;
+      while (parts.length) {
+        prop = prop[parts.shift()];
+        if (!prop) {
+          return;
+        }
+      }
+      return prop[last];
+    },
+
+    addPathObserver: function(path, method) {
+      var fx$ = this._pathEffects || (this._pathEffects = []);
+      var match = path.indexOf('.*') == (path.length-2);
+      if (match) {
+        path = path.slice(0, -2);
+      }
+      fx$.push({path: path, match: match, method: method});
+    },
+
+    // TODO(kschaaf): This machine can be optimized to memoize compiled path
+    // effectors as new paths are notified for performance, since it involves
+    // a fair amount of runtime lookup
+    _pathEffector: function(path, value) {
+      // get root property
+      var model = this._modelForPath(path);
+      // search property effects of the root property for 'annotation' effects
+      var fx$ = this._propertyEffects[model];
+      if (fx$) {
+        fx$.forEach(function(fx) {
+          if (fx.kind === 'annotation') {
+            // locate the bound node
+            var n = this._nodeForBinding(fx.effect);
+            if (n) {
+              // perform the effect
+              this._performAnnotationPathEffect(n, path, value, fx.effect);
+            }
+          }
+        }, this);
+      }
+      // iterate and perform _pathEffects matching path
+      if (this._pathEffects) {
+        this._pathEffects.forEach(function(fx) {
+          this._performPathEffect(path, value, fx);
+        }, this);
+      }
+      // notify runtime-bound paths
+      if (this._boundPaths) {
+        this._notifyBoundPaths(path, value);
+      }
+    },
+
+    _nodeForBinding: function(info) {
+      return info.id ? this.$[info.id] : this._nodes[info.index];
+    },
+
+    _performAnnotationPathEffect: function(node, path, value, effect) {
+      if (effect.value === path || effect.value.indexOf(path + '.') === 0) {
+        // TODO(sorvell): ideally the effect function is on this prototype
+        // so we don't have to call it like this.
+        Polymer.Bind.annotationEffect.call(this, path, value, effect);
+        // path == item.stuff.count
+        // value == item.stuff
+        // name == zizz
+        // calls effect n.notifyPath for zizz.count
+      } else if ((path.indexOf(effect.value + '.') === 0) &&
+                  node.notifyPath && !effect.negate) {
+        var p = this._fixPath(effect.name , effect.value, path);
+        node.notifyPath(p, value, true);
+      }
+    },
+
+    _performPathEffect: function(path, value, fx) {
+      if (fx.path == path || (fx.match && path.indexOf(fx.path) === 0)) {
+        var fn = this[fx.method];
+        if (fn) {
+          // TODO(kschaaf): sending null for old; no good way to get it?
+          fn.call(this, value, null, path);
+        }
+      }
+    },
+
+    bindPaths: function(to, from) {
+      this._boundPaths = this._boundPaths || {};
+      if (from) {
+        this._boundPaths[to] = from;
+        // this.setPathValue(to, this.getPathValue(from));
+      } else {
+        this.unbindPath(to);
+        // this.setPathValue(to, from);
+      }
+    },
+
+    unbindPaths: function(path) {
+      if (this._boundPaths) {
+        delete this._boundPaths[path];
+      }
+    },
+
+    _notifyBoundPaths: function(path, value) {
+      var from, to;
+      for (var a in this._boundPaths) {
+        var b = this._boundPaths[a];
+        if (path.indexOf(a + '.') == 0) {
+          from = a;
+          to = b;
+          break;
+        }
+        if (path.indexOf(b + '.') == 0) {
+          from = b;
+          to = a;
+          break;
+        }
+      }
+      if (from && to) {
+        var p = this._fixPath(to, from, path);
+        this.notifyPath(p, value);
+      }
+    },
+
+    _fixPath: function(property, root, path) {
+      return property + path.slice(root.length);
+    },
+
+    _notifyPath: function(path, value) {
+      var rootName = this._modelForPath(path);
+      var dashCaseName = Polymer.CaseMap.camelToDashCase(rootName);
+      var eventName = dashCaseName + this._EVENT_CHANGED;
+      this.fire(eventName, {
+        path: path,
+        value: value
+      }, null, false);
+    },
+
+    _modelForPath: function(path) {
+      return path.split('.').shift();
+    },
+
+    _EVENT_CHANGED: '-changed',
+
+  });
+
+</script>
\ No newline at end of file
diff --git a/test/smoke/x-if.html b/test/smoke/x-if.html
index 887f9e10b9..bdad8ee94e 100644
--- a/test/smoke/x-if.html
+++ b/test/smoke/x-if.html
@@ -23,19 +23,21 @@
       }
     </style>
     <template>
-      if <input type="checkbox" on-change="checkboxChange">
+      if <input type="checkbox" checked="{{checked::change}}">
+      <br><br>
+      <input value="{{value::input}}">
 
-      <template is="x-if" if="[[checked]]" item="{{item}}">
+      <template is="x-if" id="if1" if="[[checked]]">
         <h3>Lazy / hidden</h3>
         <div class="content">
-          <div>I have been <span>{{stamped}}</span></div>
+          <div>I have been <input value="{{parent.value::input}}"></div>
         </div>
       </template>
 
-      <template is="x-if" if="[[checked]]" item="{{item}}" restamp>
+      <template is="x-if" id="if2" if="[[checked]]" restamp>
         <h3>Restamp</h3>
         <div class="content">
-          <div>I have been <span>{{stamped}}</span></div>
+          <div>I have been <input value="{{parent.value::input}}"></div>
         </div>
       </template>
 
@@ -49,13 +51,9 @@ <h3>Restamp</h3>
       is: 'x-test',
 
       properties: {
-        item: {
-          value: function() { return {stamped: 'stamped!'}; }
+        value: {
+          value: 'stamped!'
         }
-      },
-
-      checkboxChange: function(e) {
-        this.checked = e.target.checked;
       }
 
     });
diff --git a/test/smoke/x-repeat.html b/test/smoke/x-repeat.html
new file mode 100644
index 0000000000..1dc62c39ba
--- /dev/null
+++ b/test/smoke/x-repeat.html
@@ -0,0 +1,284 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>x-repeat</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../../../perf-lib/perf.js"></script>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="../../../layout/layout.html">
+
+</head>
+<body>
+
+<style>
+  body {
+    font-family: sans-serif;
+    font-size: 14px;
+  }
+</style>
+
+<dom-module id="x-labeled-input">
+  <style>
+    :host {
+      width: 400px
+    }
+    #label {
+      width: 200px;
+      overflow: hidden;
+      border-bottom: 1px solid gray;
+      border-bottom-style: dashed;
+    }
+    input {
+      margin-right: 5px;
+    }
+  </style>
+  <template>
+    <div class="layout horizontal">
+      <span id="label" class="flex">{{label}}</span>
+      <input value="{{value::input}}" disabled$="{{disabled}}">
+    </div>
+  </template>
+</dom-module>
+
+
+<dom-module id="x-test">
+  <style>
+    .outer {
+      padding: 10px;
+    }
+    .column {
+      width: 400px;
+      overflow: auto;
+    }
+    .item {
+      margin: 5px;
+      margin-left: 10px;
+      margin-right: 0;
+      padding: 5px;
+      padding-right: 0;
+      background-color: rgba(0,0,0,0.1);
+    }
+    .index {
+      display: inline-block;
+      background-color: gray;
+      color: white;
+      padding: 4px;
+      margin-bottom: 4px;
+      border-radius: 4px;
+    }
+  </style>
+  <template>
+
+    <div class="fit layout vertical">
+
+      <div class="outer">
+        <div class="index">Outer scope:</div>
+        <x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
+        <x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
+        <x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
+        <x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
+        <x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
+        <x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
+      </div>
+
+      <div class="layout horizontal flex">
+
+        <div class="column flex">
+          <template is="x-repeat" id="xr1-1" items="{{items}}">
+            <div class="item" id="xr1-1" idx$="{{index}}">
+              <div class="index">idx: <span>{{index}}</span></div>
+              <button on-click="handleClickA">Change outerA</button>
+              <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerA" value="{{parent.outerA}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerObjA.value" value="{{parent.outerObjA.value}}"></x-labeled-input>
+              <x-labeled-input label="innerA" value="{{innerA}}"></x-labeled-input>
+              <x-labeled-input label="innerB" value="{{innerB}}"></x-labeled-input>
+              <x-labeled-input label="computeInner(innerA, innerB)" value="{{computeInner(innerA, innerB)}}" disabled></x-labeled-input>
+              <template is="x-repeat" id="xr1-2" idx$="{{index}}" items="{{item.items}}">
+                <div class="item" id="xr1-2" idx$="{{index}}">
+                  <div class="index">idx: <span>{{index}}</span></div>
+                  <button on-click="handleClickB">Change outerB</button>
+                  <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+                  <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerB" value="{{parent.parent.outerB}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerObjB.value" value="{{parent.parent.outerObjB.value}}"></x-labeled-input>
+                  <template is="x-repeat" id="xr1-3" idx$="{{index}}" items="{{item.items}}">
+                    <div class="item" id="xr1-3" idx$="{{index}}">
+                      <div class="index">idx: <span>{{index}}</span></div>
+                      <button on-click="handleClickC">Change outerC</button>
+                      <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.item.name" value="{{parent.parent.item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerC" value="{{parent.parent.parent.outerC}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerObjC.value" value="{{parent.parent.parent.outerObjC.value}}"></x-labeled-input>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+
+        <div class="column flex">
+          <template is="x-repeat" id="xr2-1" idx$="{{index}}" items="{{items}}">
+            <div class="item" id="xr2-1" idx$="{{index}}">
+              <div class="index">idx: <span>{{index}}</span></div>
+              <button on-click="handleClickA">Change outerA</button>
+              <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerA" value="{{parent.outerA}}"></x-labeled-input>
+              <x-labeled-input label="parent.outerObjA.value" value="{{parent.outerObjA.value}}"></x-labeled-input>
+              <x-labeled-input label="innerA" value="{{innerA}}"></x-labeled-input>
+              <x-labeled-input label="innerB" value="{{innerB}}"></x-labeled-input>
+              <x-labeled-input label="computeInner(innerA, innerB)" value="{{computeInner(innerA, innerB)}}" disabled></x-labeled-input>
+              <template is="x-repeat" id="xr2-2" idx$="{{index}}" items="{{item.items}}">
+                <div class="item" id="xr2-2" idx$="{{index}}">
+                  <div class="index">idx: <span>{{index}}</span></div>
+                  <button on-click="handleClickB">Change outerB</button>
+                  <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+                  <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerB" value="{{parent.parent.outerB}}"></x-labeled-input>
+                  <x-labeled-input label="parent.parent.outerObjB.value" value="{{parent.parent.outerObjB.value}}"></x-labeled-input>
+                  <template is="x-repeat" id="xr2-3" idx$="{{index}}" items="{{item.items}}">
+                    <div class="item" id="xr2-3" idx$="{{index}}">
+                      <div class="index">idx: <span>{{index}}</span></div>
+                      <button on-click="handleClickC">Change outerC</button>
+                      <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.item.name" value="{{parent.parent.item.name}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerC" value="{{parent.parent.parent.outerC}}"></x-labeled-input>
+                      <x-labeled-input label="parent.parent.parent.outerObjC.value" value="{{parent.parent.parent.outerObjC.value}}"></x-labeled-input>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+
+      </div>
+
+    </div>
+
+  </template>
+</dom-module>
+
+<script>
+  HTMLImports.whenReady(function() {
+
+    Polymer ({
+      is: 'x-labeled-input',
+      properties: {
+        value: {
+          notify: true
+        },
+        label: String,
+        disabled: Boolean
+      }
+    });
+
+    Polymer ({
+      is: 'x-test',
+      properties: {
+        items: {
+          value: function() {
+            return [
+              {name: 'item 1', items: [
+                {name: 'item 1-1', items: [
+                  {name: 'item 1-1-1'},
+                  {name: 'item 1-1-2'},
+                  {name: 'item 1-1-3'}
+                ]},
+                {name: 'item 1-2', items: [
+                  {name: 'item 1-2-1'},
+                  {name: 'item 1-2-2'},
+                  {name: 'item 1-2-3'}
+                ]},
+                {name: 'item 1-3', items: [
+                  {name: 'item 1-3-1'},
+                  {name: 'item 1-3-2'},
+                  {name: 'item 1-3-3'}
+                ]}
+              ]},
+              {name: 'item 2', items: [
+                {name: 'item 2-1', items: [
+                  {name: 'item 2-1-1'},
+                  {name: 'item 2-1-2'},
+                  {name: 'item 2-1-3'}
+                ]},
+                {name: 'item 2-2', items: [
+                  {name: 'item 2-2-1'},
+                  {name: 'item 2-2-2'},
+                  {name: 'item 2-2-3'}
+                ]},
+                {name: 'item 2-3', items: [
+                  {name: 'item 2-3-1'},
+                  {name: 'item 2-3-2'},
+                  {name: 'item 2-3-3'}
+                ]}
+              ]},
+              {name: 'item 3', items: [
+                {name: 'item 3-1', items: [
+                  {name: 'item 3-1-1'},
+                  {name: 'item 3-1-2'},
+                  {name: 'item 3-1-3'}
+                ]},
+                {name: 'item 3-2', items: [
+                  {name: 'item 3-2-1'},
+                  {name: 'item 3-2-2'},
+                  {name: 'item 3-2-3'}
+                ]},
+                {name: 'item 3-3', items: [
+                  {name: 'item 3-3-1'},
+                  {name: 'item 3-3-2'},
+                  {name: 'item 3-3-3'}
+                ]},
+              ]}
+            ];
+          }
+        },
+        outerA: {
+          value: 'outerA'
+        },
+        outerB: {
+          value: 'outerB'
+        },
+        outerC: {
+          value: 'outerC'
+        },
+        outerObjA: {
+          value: function() { return { value: 'outerObjA.value' }; }
+        },
+        outerObjB: {
+          value: function() { return { value: 'outerObjB.value' }; }
+        },
+        outerObjC: {
+          value: function() { return { value: 'outerObjC.value' }; }
+        }
+      },
+      handleClickA: function() {
+        this.outerA = this.outerA + 'A';
+      },
+      handleClickB: function() {
+        this.outerB = this.outerB + 'B';
+      },
+      handleClickC: function() {
+        this.outerC = this.outerC + 'C';
+      },
+      computeInner: function(a, b) {
+        return a + '-' + b;
+      }
+    });
+
+  });
+</script>
+
+<script>console.perf && console.perf();</script>
+
+<x-test class="fit"></x-test>
+
+<script>setTimeout(function() { console.perf && console.perfEnd(); });</script>