Added TodoMVC startup benchmarks.

samples/third_party/todomvc_performance/js_todomvc/components/polymer-selector/polymer-selector.html

Index: samples/third_party/todomvc_performance/js_todomvc/components/polymer-selector/polymer-selector.html
diff --git a/samples/third_party/todomvc/web/lib-elements/polymer-selector.html b/samples/third_party/todomvc_performance/js_todomvc/components/polymer-selector/polymer-selector.html
similarity index 90%
copy from samples/third_party/todomvc/web/lib-elements/polymer-selector.html
copy to samples/third_party/todomvc_performance/js_todomvc/components/polymer-selector/polymer-selector.html
index 9fd50749030bf9aab0615d90c3fe5d08103cb409..a1dcac2e0a997d9848debc8173a230681efc330f 100644
--- a/samples/third_party/todomvc/web/lib-elements/polymer-selector.html
+++ b/samples/third_party/todomvc_performance/js_todomvc/components/polymer-selector/polymer-selector.html
@@ -24,7 +24,7 @@ license that can be found in the LICENSE file.
  *
  * polymer-selector is not styled.  So one needs to use "polymer-selected" CSS
  * class to style the selected element.
- *
+ * 
  *     <style>
  *       .item.polymer-selected {
  *         background: #eee;
@@ -38,12 +38,13 @@ license that can be found in the LICENSE file.
  *     </polymer-selector>
  *
  * @class polymer-selector
+ * @status stable
  */
 /**
  * Fired when an item's selection state is changed. This event is fired both
  * when an item is selected or deselected. The `isSelected` detail property
  * contains the selection state.
- *
+ * 
  * @event polymer-select
  * @param {Object} detail
  *   @param {boolean} detail.isSelected true for selection and false for deselection
@@ -51,16 +52,17 @@ license that can be found in the LICENSE file.
  */
 /**
  * Fired when an item element is tapped.
- *
+ * 
  * @event polymer-activate
  * @param {Object} detail
  *   @param {Object} detail.item the item element
  */
 -->
-<link rel="import" href="polymer-selection.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer-selection/polymer-selection.html">
 
 <polymer-element name="polymer-selector"
-    attributes="selected multi valueattr selectedClass selectedProperty selectedItem selectedModel selectedIndex notap target itemsSelector activateEvent">
+    attributes="selected multi valueattr selectedClass selectedProperty selectedAttribute selectedItem selectedModel selectedIndex notap target itemsSelector activateEvent">
   <template>
     <polymer-selection id="selection" multi="{{multi}}" on-polymer-select="{{selectionSelect}}"></polymer-selection>
     <content id="items" select="*"></content>
@@ -117,7 +119,7 @@ license that can be found in the LICENSE file.
       valueattr: 'name',
       /**
        * Specifies the CSS class to be used to add to the selected element.
-       *
+       * 
        * @attribute selectedClass
        * @type string
        * @default 'polymer-selected'
@@ -129,13 +131,22 @@ license that can be found in the LICENSE file.
        *
        * @attribute selectedProperty
        * @type string
+       * @default ''
+       */
+      selectedProperty: '',
+      /**
+       * Specifies the property to be used to set on the selected element
+       * to indicate its active state.
+       *
+       * @attribute selectedProperty
+       * @type string
        * @default 'active'
        */
-      selectedProperty: 'active',
+      selectedAttribute: 'active',
       /**
        * Returns the currently selected element. In multi-selection this returns
        * an array of selected elements.
-       *
+       * 
        * @attribute selectedItem
        * @type Object
        * @default null
@@ -144,7 +155,7 @@ license that can be found in the LICENSE file.
       /**
        * In single selection, this returns the model associated with the
        * selected element.
-       *
+       * 
        * @attribute selectedModel
        * @type Object
        * @default null
@@ -159,16 +170,16 @@ license that can be found in the LICENSE file.
        */
       selectedIndex: -1,
       /**
-       * The target element that contains items.  If this is not set
+       * The target element that contains items.  If this is not set 
        * polymer-selector is the container.
-       *
+       * 
        * @attribute target
        * @type Object
        * @default null
        */
       target: null,
       /**
-       * This can be used to query nodes from the target node to be used for
+       * This can be used to query nodes from the target node to be used for 
        * selection items.  Note this only works if the 'target' property is set.
        *
        * Example:
@@ -180,7 +191,7 @@ license that can be found in the LICENSE file.
        *       <label><input type="radio" name="color" value="blue"> Blue</label> <br>
        *       <p>color = {{color}}</p>
        *     </form>
-       *
+       * 
        * @attribute itemSelector
        * @type string
        * @default ''
@@ -204,8 +215,8 @@ license that can be found in the LICENSE file.
         }
       },
       get items() {
-        var nodes = this.target !== this ? (this.itemsSelector ?
-            this.target.querySelectorAll(this.itemsSelector) :
+        var nodes = this.target !== this ? (this.itemsSelector ? 
+            this.target.querySelectorAll(this.itemsSelector) : 
                 this.target.children) : this.$.items.getDistributedNodes();
         return Array.prototype.filter.call(nodes || [], function(n) {
           return n && n.localName !== 'template';
@@ -246,7 +257,7 @@ license that can be found in the LICENSE file.
       },
       validateSelected: function() {
         // convert to an array for multi-selection
-        if (this.multi && !Array.isArray(this.selected) &&
+        if (this.multi && !Array.isArray(this.selected) && 
             this.selected !== null && this.selected !== undefined) {
           this.selected = [this.selected];
         }
@@ -263,7 +274,7 @@ license that can be found in the LICENSE file.
         this.$.selection.clear();
       },
       valueToSelection: function(value) {
-        var item = (value === null || value === undefined) ?
+        var item = (value === null || value === undefined) ? 
             null : this.items[this.valueToIndex(value)];
         this.$.selection.select(item);
       },
@@ -277,7 +288,7 @@ license that can be found in the LICENSE file.
         } else {
           this.selectedModel = null;
         }
-        this.selectedIndex = this.selectedItem ?
+        this.selectedIndex = this.selectedItem ? 
             parseInt(this.valueToIndex(this.selected)) : -1;
       },
       valueToIndex: function(value) {
@@ -297,7 +308,7 @@ license that can be found in the LICENSE file.
       selectionSelect: function(e, detail) {
         this.updateSelectedItem();
         if (detail.item) {
-          this.applySelection(detail.item, detail.isSelected)
+          this.applySelection(detail.item, detail.isSelected);
         }
       },
       applySelection: function(item, isSelected) {
@@ -307,6 +318,13 @@ license that can be found in the LICENSE file.
         if (this.selectedProperty) {
           item[this.selectedProperty] = isSelected;
         }
+        if (this.selectedAttribute && item.setAttribute) {
+          if (isSelected) {
+            item.setAttribute(this.selectedAttribute, '');
+          } else {
+            item.removeAttribute(this.selectedAttribute);
+          }
+        }
       },
       // event fired from host
       activateHandler: function(e) {