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

+3


source to share


1 answer


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>

+4


source







All Articles