Improve SkyElement.

sky/framework/sky-element/sky-element.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="TemplateBinding.sky" />
 <script>
-var Base = {
-  __proto__: HTMLElement.prototype,
+var templates = new Map();
 
-  register: function() {
-    // |this| is prototype
-    var template = document.currentScript.previousElementSibling;
-    if (template && template.localName == 'template')
-      this.template_ = template;
+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);
+  }
+  return result;
+}
+
+var BasePrototype = createPrototype(HTMLElement.prototype, {
+
+  createdCallback: function() {
+    this.created();
   },
 
-  createdCallback: function() {
+  created: function() {
+    // override
   },
 
   attachedCallback: function() {
-    var shadow = this.createShadowRoot();
-    shadow.appendChild(this.template_.createInstance(this));
+    if (!this.shadowRoot) {
+      var template = templates.get(this.localName);
+      if (template) {
+        var shadow = this.createShadowRoot();
+        shadow.appendChild(template.createInstance(this));
+      }
+    }
     this.attached();
   },
 
   attached: function() {
     // override
   },
 
   dettachedCallback: function() {
     this.dettached();
   },
 
   dettached: function() {
     // override
   },
 
   attributeChangedCallback: function(attrName, oldValue, newValue) {
     // reserved for canonical behavior
     this.attributeChanged(attrName, oldValue, newValue);
   },
 
   attributeChanged: function(attrName, oldValue, newValue) {
     // override
   }
-};
+});
 
 function SkyElement(prototype) {
-  prototype.__proto__ = Base;
-  document.registerElement(prototype.name, { prototype: prototype });
-  prototype.register();
+  var template = document.currentScript.previousElementSibling;
+  if (template && template.localName === 'template')
+    templates.set(prototype.name, template);

[rafaelw, 2014/11/12 12:00:53]

Nit: You want weak semantics here, so I'd use a Symbol (I assume you are trying
to avoid creating the .template_ expando). 

+
+  document.registerElement(prototype.name, {
+    prototype: createPrototype(BasePrototype, prototype),
+  });
 };
 
 module.exports = SkyElement;
 </script>