Automate reflected properties in SkyElement.

sky/framework/sky-button/sky-button.sky

Index: sky/framework/sky-button/sky-button.sky
diff --git a/sky/framework/sky-button/sky-button.sky b/sky/framework/sky-button/sky-button.sky
index 2c747b4c8a40b10e87a1212652d41c8ea6d15701..3ba1e5ded81f775d0cfd0d2a0cc33da5578bb18a 100644
--- a/sky/framework/sky-button/sky-button.sky
+++ b/sky/framework/sky-button/sky-button.sky
@@ -5,7 +5,7 @@
 -->
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
 
-<sky-element name="sky-button">
+<sky-element name="sky-button" attributes="highlight:boolean">
 <template>
   <style>
     :host {
@@ -21,29 +21,23 @@
       background-color: orange;
     }
   </style>
-  <content></content>
+  <content />
 </template>
 <script>
 module.exports = class extends SkyElement {
   created() {
     this.tabIndex = 0; // Make focusable.
-    this.setHighlight(false);
 
-    this.addEventListener("mousedown", function() {
-      this.setHighlight(true);
+    this.addEventListener('mousedown', function() {
+      this.highlight = true;
     });
-    this.addEventListener("mouseup", function() {
-      this.setHighlight(false);
+    this.addEventListener('mouseup', function() {
+      this.highlight = false;
     });
-    this.addEventListener("mouseout", function() {
-      this.setHighlight(false);
+    this.addEventListener('mouseout', function() {
+      this.highlight = false;
     });
   }
-  setHighlight(newValue) {
-    // Set both a property and an attribute to keep both parents happy.
-    this.setAttribute('highlight', newValue);
-    this.highlight = newValue;
-  }
 }.register();
 </script>
 </sky-element>