Use observeNodes in favor of MutationObserver

iron-selectable.html

@@ -64,7 +64,7 @@
 
       /**
        * Returns the currently selected item.
-       * 
+       *
        * @type {?Object}
        */
       selectedItem: {
@@ -106,6 +106,17 @@
         value: null
       },
 
+      /**
+       * The list of items from which a selection can be made.
+       */
+      items: {
+        type: Array,
+        readOnly: true,
+        value: function() {
+          return [];
+        }
+      },
+
       /**
        * The set of excluded elements where the key is the `localName`
        * of the element that will be ignored from the item list.
@@ -133,7 +144,7 @@
 
     attached: function() {
       this._observer = this._observeItems(this);
-      this._contentObserver = this._observeContent(this);
+      this._updateItems();
       if (!this.selectedItem && this.selected) {
         this._updateSelected(this.attrForSelected,this.selected)
       }
@@ -142,25 +153,11 @@
 
     detached: function() {
       if (this._observer) {
-        this._observer.disconnect();
-      }
-      if (this._contentObserver) {
-        this._contentObserver.disconnect();
+        Polymer.dom(this).unobserveNodes(this._observer);
       }
       this._removeListener(this.activateEvent);
     },
 
-    /**
-     * Returns an array of selectable items.
-     *
-     * @property items
-     * @type Array
-     */
-    get items() {
-      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
-      return Array.prototype.filter.call(nodes, this._bindFilterItem);
-    },
-
     /**
      * Returns the index of the given item.
      *
@@ -216,6 +213,12 @@
       this._addListener(eventName);
     },
 
+    _updateItems: function() {
+      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
+      nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
+      this._setItems(nodes);
+    },
+
     _updateSelected: function() {
       this._selectSelected(this.selected);
     },
@@ -274,34 +277,22 @@
       this._setSelectedItem(this._selection.get());
     },
 
-    // observe content changes under the given node.
-    _observeContent: function(node) {
-      var content = node.querySelector('content');
-      if (content && content.parentElement === node) {
-        return this._observeItems(node.domHost);
-      }
-    },
-
     // observe items change under the given node.
     _observeItems: function(node) {
-      // TODO(cdata): Update this when we get distributed children changed.
-      var observer = new MutationObserver(function(mutations) {
+      return Polymer.dom(node).observeNodes(function(mutations) {
         // Let other interested parties know about the change so that
         // we don't have to recreate mutation observers everywher.
         this.fire('iron-items-changed', mutations, {
           bubbles: false,
           cancelable: false
         });
 
+        this._updateItems();
+
         if (this.selected != null) {
           this._updateSelected();
         }
       }.bind(this));
-      observer.observe(node, {
-        childList: true,
-        subtree: true
-      });
-      return observer;
     },
 
     _activateHandler: function(e) {

test/basic.html

@@ -153,10 +153,10 @@
             changeCount++;
           });
 
-          s2.appendChild(newItem);
+          Polymer.dom(s2).appendChild(newItem);
 
           Polymer.Base.async(function() {
-            s2.removeChild(newItem);
+            Polymer.dom(s2).removeChild(newItem);
 
             Polymer.Base.async(function() {
               expect(changeCount).to.be.equal(2);