Prevent expandos on all SkyElements.

sky/examples/city-list/city-list.sky

 <!--
 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
 <import src="city-data-service.sky" as="CityDataService" />
 <import src="city-sequence.sky" as="CitySequence" />
 
 <script>
 // TODO(esprehn): exports should start as the empty object.
 module.exports = {};
 </script>
 
 <sky-element name="state-header">
 <template>
   <style>
     div {
       font-size: 16px;
       color: #FFF;
       background-color: #333;
       padding: 4px 4px 4px 12px;
       display: paragraph;
     }
   </style>
   <div>{{ state }}</div>
 </template>
 <script>
 module.exports.StateHeaderElement = class extends SkyElement {
+  created() {
+    this.state = "";
+  }
   set datum(datum) {
     this.state = datum.state;
   }
 }.register();
 </script>
 </sky-element>
 
 <sky-element name="letter-header">
 <template>
   <style>
     div {
       font-size: 12px;
       font-weight: bold;
       padding: 2px 4px 4px 12px;
       background-color: #DDD;
       display: paragraph;
     }
   </style>
   <div>{{ letter }}</div>
 </template>
 <script>
 module.exports.LetterHeaderElement = class extends SkyElement {
+  created() {
+    this.letter = "";
+  }
   set datum(datum) {
     this.letter = datum.letter;
   }
 }.register();
 </script>
 </sky-element>
 
 <sky-element name="city-item">
 <template>
   <style>
@@ skipping 23 matching lines @@
     }
 
   </style>
   <div>
     <span id="name">{{ name }}</span>,
     <span id="population">population {{ population }}</span>
   </div>
 </template>
 <script>
 module.exports.CityItemElement = class extends SkyElement {
+  created() {
+    this.name = "";
+    this.population = "";
+  }
   set datum(datum) {
     this.name = datum.name;
     this.population = datum.population;
   }
 }.register();
 </script>
 </sky-element>
 
 <sky-element name="city-list">
 <template>
@@ skipping 441 matching lines @@
 
     module.exports.CityListElement = class extends SkyElement {
 
       created() {
         this.loader = null;
         this.scroller = null;
         this.tiler = null;
         this.date = null;
         this.month = null;
         this.views = null;
+        this.scrollerElement = null;
       }
 
       attached() {
         this.views = {};
         this.loader = new Loader(this);
         this.scroller = new Scroller();
         this.tiler = new Tiler(
             this.shadowRoot.getElementById('contentarea'), this.views, {
           stateHeader: 27,
           letterHeader: 18,
           cityItem: 30
         });
 
-        this.dataLoaded = this.dataLoaded.bind(this);
         this.scrollerElement = this.shadowRoot.getElementById('scroller');
         this.scrollerElement.addEventListener('scroll',
             this.handleScroll.bind(this));
 
         var self = this;
         setTimeout(function() {
           self.domReady();
-          self.loader.maybeLoadMoreData(self.dataLoaded);
+          self.loader.maybeLoadMoreData(self.dataLoaded.bind(self));
         });
       }
 
       domReady() {
         this.scroller.setup(this.shadowRoot.getElementById('scroller'),
             this.shadowRoot.getElementById('scrollarea'),
             this.shadowRoot.getElementById('contentarea'));
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.setupViews(scrollFrame);
       }
 
       updateView(data, scrollChanged) {
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.drawTiles(scrollFrame, data);
         var datum = scrollChanged ?
             this.tiler.getFirstVisibleDatum(scrollFrame) : null;
-        this.loader.maybeLoadMoreData(this.dataLoaded, datum);
+        this.loader.maybeLoadMoreData(this.dataLoaded.bind(this), datum);
       }
 
       dataLoaded(data, indexOffset) {
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.updateFirstItem(indexOffset);
         this.updateView(data.items, false);
       }
 
       handleScroll(event) {
         if (!this.scroller.captureNewFrame(event))
           return;
 
         this.updateView(this.loader.getItems(), true);
       }
 
       scrollBy(amount) {
         this.scrollerElement.scrollTop += amount;
         this.handleScroll({ target: this.scrollerElement });
       }
     }.register();
 
 })(this);
 </script>
 </sky-element>