Automate reflected properties in SkyElement.

sky/framework/sky-checkbox/sky-checkbox.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="/sky/framework/sky-button/sky-button.sky" as="SkyButton" />
 
-<sky-element name="sky-checkbox">
+<sky-element name="sky-checkbox" attributes="checked:boolean">
 <template>
   <style>
     :host {
       display: flex;
       justify-content: center;
       align-items: center;
       -webkit-user-select: none;
       cursor: pointer;
       width: 30px;
       height: 30px;
@@ skipping 19 matching lines @@
       height: 20px;
       border-style: solid;
       border-top: none;
       border-left: none;
       border-right-width: 2px;
       border-bottom-width: 2px;
       border-color: #0f9d58;
     }
   </style>
   <div id="container" class="{{ containerStyle }}">
-    <div id="check" class="{{ checkStyle }}"></div>
+    <div id="check" class="{{ checkStyle }}" />
   </div>
 </template>
 <script>
 module.exports = class extends SkyButton {
   created() {
     super.created();
 
     this.containerStyle = "";
     this.checkStyle = "";
 
-    this.setChecked(this.getAttribute('checked') == 'true');
-
     this.addEventListener("mouseup", function() {
-      this.toggleChecked();
+      this.checked = !this.checked;
     });
   }
-  toggleChecked() {
-    this.setChecked(!this.checked);
+  checkedChanged(oldValue, newValue) {
+    this.checkStyle = newValue ? 'checked' : '';
   }
-  setChecked(checked) {
-    this.checked = checked;
-    this.setAttribute('checked', checked);
-    this.checkStyle = checked ? 'checked' : '';
-  }
-  setHighlight(newValue) {
-    super.setHighlight(newValue);
+  highlightChanged(oldValue, newValue) {
     this.containerStyle = newValue ? 'highlight' : '';
   }
-  shadowRootReady() {
-    // TODO(esprehn): This is needed because the checked and highlight
-    // setters might be called before the shadowRoot is created since that
-    // doesn't happen until attached(). We should figure out a better way to do
-    // this.
-    this.setHighlight(this.highlight);
-    this.setChecked(this.checked);
-  }
 }.register();
 </script>
 </sky-element>