Make SkyElement more classy.

sky/framework/sky-element/sky-element.sky

Index: sky/framework/sky-element/sky-element.sky
diff --git a/sky/framework/sky-element/sky-element.sky b/sky/framework/sky-element/sky-element.sky
index 81b796ae1fdd4140ab83b9e3f0c1fa25224fb98a..aaf130faab83431b0f057c303a10ce166511b705 100644
--- a/sky/framework/sky-element/sky-element.sky
+++ b/sky/framework/sky-element/sky-element.sky
@@ -7,27 +7,48 @@
 <script>
 var templates = new Map();
 
-function createPrototype(proto, definition) {
-  var result = Object.create(proto);
-  var names = Object.getOwnPropertyNames(definition);
-  for (var i = 0; i < names.length; ++i) {
-    var descriptor = Object.getOwnPropertyDescriptor(definition, names[i]);
-    Object.defineProperty(result, names[i], descriptor);
+class SkyElement extends HTMLElement {
+
+  static register() {
+    var wrapper = document.currentScript.parentNode;
+
+    if (wrapper.localName !== 'sky-element')
+      throw new Error('No <sky-element>.');
+
+    var tagName = wrapper.getAttribute("name");
+    if (!tagName)
+      throw new Error('<sky-element> must have a name.');
+
+    var template = wrapper.querySelector('template');
+    if (template)
+      templates.set(tagName, template);
+
+    return document.registerElement(tagName, {
+      prototype: this.prototype,
+    });
+  }
+
+  created() {
+    // override
   }
-  return result;
-}
 
-var BasePrototype = createPrototype(HTMLElement.prototype, {
+  attached() {
+    // override
+  }
 
-  createdCallback: function() {
-    this.created();
-  },
+  dettached() {
+    // override
+  }
 
-  created: function() {
+  attributeChanged(attrName, oldValue, newValue) {
     // override
-  },
+  }
 
-  attachedCallback: function() {
+  createdCallback() {
+    this.created();
+  }
+
+  attachedCallback() {
     if (!this.shadowRoot) {
       var template = templates.get(this.localName);
       if (template) {
@@ -36,38 +57,16 @@ var BasePrototype = createPrototype(HTMLElement.prototype, {
       }
     }
     this.attached();
-  },
-
-  attached: function() {
-    // override
-  },
+  }
 
-  dettachedCallback: function() {
+  dettachedCallback() {
     this.dettached();
-  },
-
-  dettached: function() {
-    // override
-  },
+  }
 
-  attributeChangedCallback: function(attrName, oldValue, newValue) {
+  attributeChangedCallback(attrName, oldValue, newValue) {
     // reserved for canonical behavior
     this.attributeChanged(attrName, oldValue, newValue);
-  },
-
-  attributeChanged: function(attrName, oldValue, newValue) {
-    // override
   }
-});
-
-function SkyElement(prototype) {
-  var template = document.currentScript.previousElementSibling;
-  if (template && template.localName === 'template')
-    templates.set(prototype.name, template);
-
-  document.registerElement(prototype.name, {
-    prototype: createPrototype(BasePrototype, prototype),
-  });
 };
 
 module.exports = SkyElement;