polymer-element supports new requirements for type extension custom elements

Author: sorvell

src/declaration/polymer-element.js

@@ -106,7 +106,7 @@
         Platform.ShadowCSS.shimStyling(this.templateContent(), name, extendee);
       }
       // register our custom element
-      this.registerPrototype(name);
+      this.registerPrototype(name, extendee);
       // reference constructor in a global named by 'constructor' attribute
       this.publishConstructor();
       // subclasses may now register themselves

src/declaration/prototype.js

@@ -81,11 +81,16 @@
       prototype[name] = extend({}, Object.getPrototypeOf(prototype)[name]);
     },
     // register 'prototype' to custom element 'name', store constructor 
-    registerPrototype: function(name) { 
-      // register the custom type
-      this.ctor = document.register(name, {
+    registerPrototype: function(name, extendee) { 
+      var info = {
         prototype: this.prototype
-      });
+      }
+      // native element must be specified in extends
+      if (extendee && extendee.indexOf('-') < 0) {
+        info.extends = extendee;
+      }
+      // register the custom type
+      this.ctor = document.register(name, info);
       // constructor shenanigans
       this.prototype.constructor = this.ctor;
       // register the prototype with HTMLElement for name lookup

test/html/element-registration.html

@@ -30,6 +30,7 @@
 
   <x-blarg></x-blarg>
   <hr>
+  <li is="my-li"></li>
 
   <!-- script follows declaration -->
   <polymer-element name="x-foo">
@@ -130,6 +131,17 @@
     </script>
   </polymer-element>
 
+  <polymer-element name="my-li" extends="li">
+    <template>
+      Hello World
+    </template>
+    <script>
+      Polymer('my-li', {
+        custom: true
+      });
+    </script>
+  </polymer-element>
+
   <script>
     var assert = chai.assert;
     function test() {
@@ -146,6 +158,8 @@
       assert.equal(fizz.squid, 'fink');
       var zzif = document.querySelector('x-zzif');
       assert.equal(zzif.squid, 'zink');
+      var myLi = document.querySelector('[is=my-li]');
+      assert.equal(myLi.custom, true);
       done();
     }
   </script>