Fix embeded templates

demo/index.html

@@ -80,7 +80,25 @@ <h3>Example</h3>
           </iron-selector>
         </div>
       </div>
+
+      <div>
+        <h3>Example</h3>
+        <div class="horizontal-section">
+          <iron-selector selected="0">
+            <template id="rep" is="dom-repeat" as="item">
+              <div class="view" data-value$="[[item.value]]" data-index$="[[index]]">[[item.text]]</div>
+            </template>
+            <div class="view" data-value="Item 4" data-index="4">Item 4</div>
+          </iron-selector>
+        </div>
+      </div>
     </div>
 
   </body>
+  <script>
+    window.addEventListener('WebComponentsReady',function() {
+        r=document.querySelector('#rep');
+        r.set('items',[{value:0,text:"Item 0"},{value:1,text:"Item 1"},{value:2,text:"Item 2"},{value:3,text:"Item 3"}]);
+    });
+  </script>
 </html>

iron-selectable.html

@@ -99,7 +99,7 @@
       },
 
       /**
-       * The set of excluded elements where the key is the `localName` 
+       * The set of excluded elements where the key is the `localName`
        * of the element that will be ignored from the item list.
        *
        * @type {object}
@@ -147,7 +147,11 @@
      * @type Array
      */
     get items() {
-      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
+      var nodes;
+      if (this.selectable)
+          nodes = this.querySelectorAll(this.selectable);
+      else
+          nodes = Polymer.dom(this).queryDistributedElements('*');
       return Array.prototype.filter.call(nodes, this._bindFilterItem);
     },
 

iron-selector.html

@@ -10,7 +10,11 @@
 
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="iron-multi-selectable.html">
-
+<dom-module is="iron-selector">
+  <template>
+    <content></content>
+  </template>
+</dom-module>
 <script>
   /**
   `iron-selector` is an element which can be used to manage a list of elements

test/content-element.html

@@ -34,10 +34,8 @@
       selected: {
         type: String,
         notify: true
-      }
-
+      },
     }
-
   });
 
 </script>

test/content.html

@@ -49,16 +49,34 @@
 
   <test-content-element id="selector3" selected="item0">
     <template is="dom-repeat" id="t">
-      <div id$="[[item.name]]">[[item.name]]</div>
+      <item id$="[[item.name]]">[[item.name]]</item>
     </template>
   </test-content-element>
 
+  <template is="dom-bind" id="app">
+  <test-content-element id="selector4" selectable="item" selected="main1-item0">
+    <template is="dom-repeat" id="t1" items="[[mainitems]]" as="main">
+        <div id$="[[_concatNames(main,'item0')]]">[[_concatNames(main,'item0')]]</div>
+        <template is="dom-repeat" items="[[subitems]]" as="sub">
+          <item id$="[[_concatNames(main,sub)]]">[[_concatNames(main,sub)]]</item>
+        </template>
+    </template>
+  </test-content-element>
+  </template>
+
   <script>
 
+  window.addEventListener('WebComponentsReady',function() {
+
     var s1 = document.querySelector('#selector1');
     var s2 = document.querySelector('#selector2');
     var s3 = document.querySelector('#selector3');
 
+    var app = document.querySelector('#app');
+    app.mainitems=[{name:'main1'}, {name: 'main2'}, {name: 'main3'}, {name: 'main4'}];
+    app.subitems=[{name:'item0'}, {name: 'item1'}, {name: 'item2'}, {name: 'item3'}];
+    app._concatNames=function(n1,n2) { return n1.name+"-"+(n2.name||n2); }
+
     var t = document.querySelector('#t');
 
     suite('content', function() {
@@ -143,6 +161,57 @@
 
     });
 
+    suite('content in repeat with selectable', function() {
+      var s4;
+      setup(function() {
+        s4 = app.$.selector4;//("#selector4");
+      });
+      test('attribute selected', function() {
+        // check selected class
+        assert.isTrue(s4.querySelector('item#main1-item0').classList.contains('iron-selected'));
+      });
+
+      test('set selected', function() {
+        // set selected
+        s4.selected = 'main2-item0';
+        // check selected class
+        assert.isTrue(s4.querySelector('item#main2-item0').classList.contains('iron-selected'));
+      });
+
+      test('get items', function() {
+        assert.equal(s4.$.selector.items.length, 16);
+      });
+
+      test('activate event', function() {
+        var item = s4.querySelector('item#main1-item2');
+        item.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+        // check selected class
+        assert.isTrue(item.classList.contains('iron-selected'));
+      });
+
+      test('not activate event', function() {
+        var item = s4.querySelector('div#main2-item0');
+        item.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+        // check selected class
+        assert.isFalse(item.classList.contains('iron-selected'));
+      });
+
+      test('add item dynamically', function() {
+        var item = document.createElement('item');
+        item.id = 'newItem';
+        item.textContent = 'New Item';
+        Polymer.dom(s4).appendChild(item);
+        Polymer.dom.flush();
+        // set selected
+        s4.selected = 'newItem';
+        // check items length
+        assert.equal(s4.$.selector.items.length, 17);
+        // check selected class
+        assert.isTrue(s4.querySelector('item#newItem').classList.contains('iron-selected'));
+      });
+
+    });
+
     suite('content with dom-repeat', function() {
 
       test('supports repeated children', function(done) {
@@ -161,6 +230,7 @@
       });
 
     });
+  });
 
   </script>
 

test/template-repeat.html

@@ -92,7 +92,7 @@
       test('set selected to something else', function(done) {
         setTimeout(function() {
           // set selected to something else
-          s.selected = 3;
+          s.set('selected', 3);
           // check selected item
           var item = s.selectedItem;
           assert.equal(s.items[3], item);
@@ -107,4 +107,4 @@
   </script>
 
 </body>
-</html>
+</html>