Dynamic element with data-bind

by mkappeller

HTML

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-input/paper-input.html">

<dom-module id="my-app">
  <template>
    <paper-input label="global.text" value="{{global.text}}"></paper-input>
    <paper-button raised id="addHeadline">Add Headline</paper-button>
    <paper-button raised id="changeText">Change Text</paper-button>
    <p>global.text: &lt;{{global.text}}&gt;</p>
  </template>
  <script>
    Polymer({
      is: "my-app",
      properties: {
        global: {}
      },
      ready: function() {
        this.count = 0;

        this.$.addHeadline.addEventListener("click", () => {

          var myApp = Polymer.dom(document.getElementById("my-app"));

          var t = myApp.node.childNodes[1];

          var heading = document.createElement("h1");
          heading.textContent = "{{global.text}}";

          // Append to my-app
          Polymer.dom(this.root).appendChild(heading);
        });
        this.$.changeText.addEventListener("click", () => {
          this.set("global.text", "count-" + this.count++);
        });
      }
    });

  </script>
</dom-module>
<my-app></my-app>

JavaScript

window.addEventListener("WebComponentsReady", function() {
  var myAppModule = document.getElementById("my-app");
  var myApp = document.getElementsByTagName("my-app")[0];

  myApp.set("global", {
    text: "Init"
  });
});