Extending paper-item in Polymer Dart

Question

I have been trying to extend the paper-item element from the paper_elements package. I do things as I have done when extending my own elements, but that 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 get no error message, and no Polymer Element is initialised, with a blank part of the page where ever I've put a Polymer element.

I try using the same method I've used to extend a builtin HTML element like button or div. That 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 extends part of the polymer template definition, again I get nothing. Where the Polymer elements in the page have been placed, there is nothing but blankness.

The previous error still happens if I import the actual JS version polymer-item.html via

<link rel="import" href="../../packages/paper_elements/src/paper-item/paper-item.html">

though I still have to extend PaperItem with Polymer and Observable, using the super.polymerCreated(); to generate that error.

I know that the Polymer Dart Team did some trickery to get the underlying paper-elements, which are written in JS, to work almost like they are Polymer Dart elements. I guess this is what's causing the problems. My question is how do I overcome this, so I can extend a paper-element in Dart?

UPDATE - A bug has been submitted https://code.google.com/p/dart/issues/detail?id=20388

The things you added in your 2nd example are only necessary when extending DOM elements. — Günter Zöchbauer
I know, but I was desperate, and thought it might just work. It also stops others from suggesting it — James Hurford

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-08-06T07:53:36

I tried it and it also didn't work for me.
I'm pretty sure this is a bug/missing feature with the Dart wrapper for the Polymer.js elements used in paper-elements/core-elements.

~~You haven't added the HTML of your element. Does your extending elements template contain a <shadow></shadow> element?~~

<polymer-element name="x-item" extends="paper-item">
   <template>
     <shadow></shadow>
   </template>
</polymer-element>

Extending paper-item in Polymer Dart

1 Answers