Expansion of a paper product in a polymer dart
I am trying to extend the paper-item from the paper_elements package. I do what I did when expanding my own elements, but it fails.
<link rel="import" href="../../packages/polymer/polymer.html"> <link rel="import" href="../../packages/paper_elements/paper_item.html"> <polymer-element name="x-item" extends="paper-item"> ... </polymer-element> @CustomTag('x-item') class XItem extends PaperItem { XItem.created() : super.created(); }
I don't get an error and no Polymer element is initialized, with a blank part of the page where ever I put the Polymer element.
I am trying to use the same method I used to extend an inline HTML element like a button or div. This also fails.
<link rel="import" href="../../packages/polymer/polymer.html"> <link rel="import" href="../../packages/paper_elements/paper_item.html"> <polymer-element name="x-item" extends="paper-item"> ... </polymer-element> @CustomTag('x-item') class XItem extends PaperItem with Polymer, Observable { XItem.created() : super.created() { super.polymerCreated(); } }
And i get
Breaking on exception: NotSupportedError: Registration failed for type 'x-item'. The tag name specified in 'extends' is a custom element name. Use inheritance instead.
If I remove the extended part of the polymer template definition, I get nothing again. When Polymer elements are placed on the page, there is nothing but emptiness.
The previous error still happens if I import the actual JS version-item.html via
<link rel="import" href="../../packages/paper_elements/src/paper-item/paper-item.html">
although I still need to extend the PaperItem with Polymer and Observable using super.polymerCreated (); to generate this error.
I know the Polymer Dart team did some trickery to get basic paper-based elements written in JS to work in much the same way as Polymer Dart elements. This is probably what is causing the problem. My question is, how do I overcome this, so I can expand the paper element in Dart?
UPDATE - Bug posted https://code.google.com/p/dart/issues/detail?id=20388
source to share
I tried it and it didn't work for me either. I'm pretty sure this is a bug / missing feature with Dart skin for Polymer.js elements used in document / core elements.
You haven't added the HTML of your element. The expanding elements template contains the <shadow></shadow>
?
<polymer-element name="x-item" extends="paper-item"> <template> <shadow></shadow> </template> </polymer-element>
Strike>
source to share