Add A "dynamic" Element With Data-binding To My Polymer-element

For days I try to feed Polymer with some 'dynamic' elements :) Unfortunately without success... My goal is to get an element added during runtime and fill it with content by polyme

Solution 1:

I've almost got it by using Polymer.Templatizer behaviour. Unfortunately it seems that there is some bug or my mistake which prevents updates from parent from being applied to the dynamically created template. I'll raise an issue on GitHub.

<basehref="https://polygit.org/components/"><scriptsrc="webcomponentsjs/webcomponents-lite.min.js"></script><linkhref="polymer/polymer.html"rel="import"><linkrel="import"href="paper-button/paper-button.html"><linkrel="import"href="paper-input/paper-input.html"><dom-moduleid="my-app"><template><paper-inputlabel="global.text"value="{{global.text}}"></paper-input><paper-buttonraisedid="addHeadline"on-tap="addHeadline">Add Headline</paper-button><paper-buttonraisedid="changeText"on-tap="click">Change Text</paper-button><p>global.text: &lt;{{global.text}}&gt;</p><templateif="true"is="dom-if"><div>      
		dom-if: <inputtype="text"value="{{global.text::input}}" /></div></template></template><script>Polymer({
	  is: "my-app",
	  behaviors: [ Polymer.Templatizer ],
	  properties: {
		global: {
		  value: { text:'i' },
		  notify: true
		}
	  },
	  ready: function() {
		this.count = 0;
		
        // this ensures that global.text is updated when text changesthis._instanceProps = {
			text: true
		};
	  },
	  addHeadline: function() {
		
		this.template = document.createElement("template");
		var templateRoot = document.createElement('div');
		templateRoot.innerHTML = `<h1>{{text.text}}</h1><input type="text" value="{{text.text::input}}" />`;
        // you cannot just set innerHTML in <template>this.template.content.appendChild(templateRoot);
		
		this.templatize(this.template);
		var clone = this.stamp({
		  text: this.global
		});

		// Append to my-appPolymer.dom(this.root).appendChild(clone.root);
	  },
	  click: function() {
		this.set("global.text", "count-" + this.count++);
	  },
	  _forwardInstanceProp: function(inst, p, val) {
		debugger;
	  },
	  _forwardInstancePath: function(inst, p, val) {
        // notify parent's correct path when text.text changesthis.set(p.replace(/^text/, 'global'), val);
	  },
	  _forwardParentProp: function(prop, value) {
		debugger;
	  },
	  _forwardParentPath: function(prop, value) {
		debugger;
	  }
	});

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