Fix distributed child nodes side effects

By sorvell: (Polymer's team member)

"[...] The 'ready' method cannot be used with code that depends
on the state of external elements, e.g. children or distributed elements or
parent. The element is not guaranteed to be in the dom when ready is
called. Instead, ready is the signal that the element's internal state is
ready for use, its shadowRoot, event listeners, property observers, and
bindings.

Instead you should use the 'attached' method for this type of thing. When
attached is called, the element is in the dom tree. Further, it's best to
go asynchronous when accessing external dom. This ensures any element
upgrades have been processed. This way you are independent of upgrade
ordering. [...]"

more info: Polymer/polymer#414

iron-data-table.html

@@ -477,33 +477,35 @@
         '_resetData(dataSource, filter.*, sortOrder.*)'
       ],
 
-      created: function() {
-        this._observer = Polymer.dom(this).observeNodes(function(info) {
-          var hasColumns = function(node) {
-            return (node.nodeType === Node.ELEMENT_NODE && node.tagName.toUpperCase() === 'DATA-TABLE-COLUMN');
-          };
-
-          var hasDetails = function(node) {
-            return (node.nodeType === Node.ELEMENT_NODE &&
-              node.tagName.toUpperCase() === 'TEMPLATE' && node.hasAttribute('is') &&
-              node.getAttribute('is') === 'row-detail');
-          };
-
-          if (info.addedNodes.filter(hasColumns).length > 0 ||
-            info.removedNodes.filter(hasColumns).length > 0) {
-            this.set('columns', this.getContentChildren('[select=data-table-column]'));
-            this.notifyResize();
-          }
-
-          if (info.addedNodes.filter(hasDetails).length > 0) {
-            this.set('rowDetail', this.getContentChildren('[select="template[is=row-detail]"]')[0]);
-
-            // assuming parent element is always a Polymer element.
-            // set dataHost to the same context the template was declared in
-            var parent = Polymer.dom(this.rowDetail).parentNode;
-            this.rowDetail._rootDataHost = parent.dataHost ? (parent.dataHost._rootDataHost || parent.dataHost) : parent;
-          }
-
+      attached: function() {
+        this.async(function(){
+           this._observer = Polymer.dom(this).observeNodes(function(info) {
+             var hasColumns = function(node) {
+               return (node.nodeType === Node.ELEMENT_NODE && node.tagName.toUpperCase() === 'DATA-TABLE-COLUMN');
+             };
+
+             var hasDetails = function(node) {
+               return (node.nodeType === Node.ELEMENT_NODE &&
+                 node.tagName.toUpperCase() === 'TEMPLATE' && node.hasAttribute('is') &&
+                 node.getAttribute('is') === 'row-detail');
+             };
+
+             if (info.addedNodes.filter(hasColumns).length > 0 ||
+               info.removedNodes.filter(hasColumns).length > 0) {
+               this.set('columns', this.getContentChildren('[select=data-table-column]'));
+               this.notifyResize();
+             }
+
+             if (info.addedNodes.filter(hasDetails).length > 0) {
+               this.set('rowDetail', this.getContentChildren('[select="template[is=row-detail]"]')[0]);
+
+               // assuming parent element is always a Polymer element.
+               // set dataHost to the same context the template was declared in
+               var parent = Polymer.dom(this.rowDetail).parentNode;
+               this.rowDetail._rootDataHost = parent.dataHost ? (parent.dataHost._rootDataHost || parent.dataHost) : parent;
+             }
+
+           }.bind(this));
         }.bind(this));
       },