my-app.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" type="text/css" href="../sub-element/sub-element.html">
<link rel="import" type="text/css" href="../my-super/my-super.html">

<polymer-element name="my-app" extends="my-super">
  <template>root <content></content><shadow></shadow></template>
  <script type="text/javascript">
    Polymer('my-app', {
      ready: function() {
        this.subElement = new SubElement();
        this.appendChild(this.subElement);
        this.subElement.id = "foo";

        this.subElement = new SubElement();
        this.appendChild(this.subElement);
        this.subElement.id = "bar";
      },
    });
  </script>
</polymer-element>

my-super.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="my-super" constructor="MySuper" noscript>
  <template>I'm Super</template>
</polymer-element>

sub-element.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="sub-element" constructor="SubElement">
  <template> child </template>
  <script type="text/javascript">
    Polymer('sub-element', {
      ready: function() {
        console.log("all ready!");
      },
      idChanged: function(_, newV){
        console.log("idChanged", newV);
      }
    });
  </script>
</polymer-element>