Extending polymer-elements

by Tomek

HTML

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="polymer-el">
  <!-- UI-less element -->
  <script>
    Polymer('polymer-el', {
      myName: 'el'
    });
  </script>
</polymer-element>

<polymer-element name="polymer-el-ext" extends="polymer-el">
  <template>
    I'm extended {{myName}} <!-- "el" -->
  </template>
  <script>
    Polymer('polymer-el-ext');
  </script>
</polymer-element>

<polymer-element name="polymer-el2">
  <template>
    I'm el2
  </template>
  <script>
    Polymer('polymer-el2');
  </script>
</polymer-element>

<polymer-element name="polymer-div-ext" extends="div">
  <template>
    I'm extended div
  </template>
  <script>
    Polymer('polymer-div-ext');
  </script>
</polymer-element>

<polymer-element name="polymer-ul-ext" extends="ul">
  <template>
    I'm extended ul
      <content></content>
  </template>
  <script>
    Polymer('polymer-ul-ext');
  </script>
</polymer-element>

&lt;polymer-el&gt;: <polymer-el></polymer-el>,<br/>
&lt;polymer-el-ext&gt;: <polymer-el-ext></polymer-el-ext>,<br/>
&lt;polymer-el is="polymer-el-ext"&gt;: <polymer-el></polymer-el>,<br/>
&lt;polymer-el2&gt;: <polymer-el2></polymer-el2>,<br/>
&lt;div is="polymer-el2"&gt;: <div is="polymer-el2"></div>,<br/>
&lt;div is="polymer-div-ext"&gt;: <div is="polymer-div-ext"></div>,<br/>
&lt;div is="polymer-ul-ext"&gt;: <ul is="polymer-ul-ext"><li>item</li></ul>