Dynamically added paper-button is not rendered correctly

Question

I have the following html:

  <paper-button raised>Static</paper-button>
  <script>
    var button = document.createElement('paper-button');
    button.textContent = "dynamic";
    button.raised = true;
    document.body.appendChild(button);
  </script>

If I add the paper-button statically, it renders normally, but I have do allmost the exact same thing dynamically, I don't get any animations.

Is there something special I need to do if I add the paper-button dynamically ?

see: http://jsbin.com/rararurotu/1/edit?html,output

Answer 1

You need to set the textContent using the Polymer.dom api.

The following code will work:

<paper-button raised>static</paper-button>
<script>
  var button = document.createElement('paper-button');
  button.raised = true;
  Polymer.dom(button).textContent = 'dynamic';
  document.body.appendChild(button);
</script>

see: http://jsbin.com/gexifaxaqi/1/edit?html,output