Automate reflected properties in SkyElement.

sky/framework/sky-radio/sky-radio.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-radio">
+<sky-element name="sky-radio" attributes="selected:boolean, group:string">
 <template>
   <style>
     :host {
       display: inline-block;
       -webkit-user-select: none;
       width: 14px;
       height: 14px;
       border-radius: 7px;
       border: 1px solid blue;
       margin: 0 5px;
@@ skipping 24 matching lines @@
     if (!controller)
       kControllerMap.set(scope, new RadioGroupController());
     return kControllerMap.get(scope);
   }
   constructor() {
     this.radios = new Set();
   }
   addRadio(radio) {
     this.radios.add(radio);
     // If this new radio is default-selected, take selection from the group.
-    if (radio.selected)
+    if (radio.selected) {
       this.takeSelectionFromGroup(radio);
+    }

[abarth-chromium, 2015/01/06 04:02:38]

Why add the braces?

[esprehn, 2015/01/06 04:10:24]

Woops, that was from debugging.

   }
   removeRadio(radio) {
     this.radios.remove(radio);
   }
   takeSelectionFromGroup(selectedRadio) {
-    // Emtpy/null/undefined group means and isolated radio.
+    // Emtpy/null/undefined group means an isolated radio.
     if (!selectedRadio.group)
       return;
     this.radios.forEach(function(radio) {
       if (selectedRadio === radio)
         return;
       if (radio.group != selectedRadio.group)
         return;
-      radio.setSelected(false);
-    })
+      radio.selected = false;
+    });
   }
 };
 
 module.exports = class extends SkyButton {
   created() {
     super.created();
-    this.setSelected(this.getAttribute('selected'));
-    this.group = this.getAttribute('group');
+
+    this.controller = null;
 
     this.addEventListener("mouseup", function() {
-      this.setSelected(true);
+      this.selected = true;
     });
-    this.cachedController = null;
   }
   attached() {
     super.attached();
-    this.cachedController = RadioGroupController.forRadio(this);
-    this.cachedController.addRadio(this);
+    this.controller = RadioGroupController.forRadio(this);
+    this.controller.addRadio(this);
   }
   detached() {
     super.detached();
-    this.cachedController.removeRadio(this);
+    this.controller.removeRadio(this);
+    this.controller = null;
   }
-  setSelected(selected) {
-    if (selected == this.selected)
-      return;
-    this.setAttribute('selected', selected);
-    this.selected = selected;
-    if (selected && this.cachedController)
-      this.cachedController.takeSelectionFromGroup(this);
+  selectedChanged(oldValue, newValue) {
+    if (newValue && this.controller)
+      this.controller.takeSelectionFromGroup(this);
+  }
+  groupChanged(oldValue, newValue) {
+    if (this.selected && this.controller)
+      this.controller.takeSelectionFromGroup(this);
   }
 }.register();
 </script>
 </sky-element>