How to add dynamically extended element with Polymer?

xliiv Published at Dev

xliiv

I've got button:

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

<polymer-element name="count-button" extends="button" on-click="increment">
  <template>
    <content>Increment: </content>
  </template>

  <script>
    Polymer({
      counter: 0,
      increment: function(e, detail, sender) {
          this.counter++;
          alert(this.counter);
      }
    })
  </script>
</polymer-element>

I successfully use it in html by:

<button is="count-button"></button>

How to add such button in js? My incorrect version is (ready function):

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

<polymer-element name='my-input'>
    <template>
        my input
        <style>
        </style>
    </template>
    <script>
        Polymer('my-input', {
            publish: {
            },
            ready: function() {
                var node = document.createElement("button");
                node.setAttribute('is', 'count-button');
                this.shadowRoot.appendChild(node);
            }
        });
    </script>
</polymer-element>

xliiv

I've found the solution by my self and it's as easy as these 2 lines:

var node = document.createElement("button", 'count-button');
this.shadowRoot.appendChild(node);

So the complete answer is here:

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

<polymer-element name='my-input'>
    <template>
        my input
        <style>
        </style>
    </template>
    <script>
        Polymer('my-input', {
            publish: {
            },
            ready: function() {
                # only these 2 lines
                var node = document.createElement("button", 'count-button');
                this.shadowRoot.appendChild(node);
            }
        });
    </script>
</polymer-element>

Collected from the Internet

Please contact [email protected] to delete if infringement.