Polymeric dynamic element name in dom-repeat

since my comment was of some interest, I put it as an answer.

Currently the code examples will be in version 1.9, I will update my answer when I make the transition to 2.0, but the idea should be the same anyway

First you need a wrapper element that will be able to dynamically create another element from a property and add it to itself. In my example, the name of the element being created will have a property named type

JSON object. Data retrieved from the database in XHR.

With a dynamically created element, binding will not work, so you have to do it manually. What the function is for _updateState

, here it only updates one property at a time, but the idea is the same, there are more.

wrapper:

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

<dom-module id="element-wrapper">
    <template></template>
    <script>
        Polymer({
            is: 'element-wrapper',
            properties: {
                elementData: {
                     type: Object
                },
                saveFbPath: {
                    type: String
                },
                element: {
                    type: Object
                },
                formSubmitPressed: {
                    type: Boolean,
                    value: false
                }
            },
            observers: [
                '_updateState(elementData.*)'
            ],
            attached: function () {
                console.log("creating element : ", this.elementData);
                this.async(function () {
                    this.element = this.create(this.elementData.type, {
                        "data": this.elementData
                    });
                    this.appendChild(this.element);
                }.bind(this));
            },
            _updateState: function (elementData) {
                if (typeof this.element !== "undefined") {
                    this.element.data = elementData.value;
                    console.log('Change captured', elementData);
                }
            }
        });
    </script>
</dom-module>

      

        
        
        
      

    

The string this.element = this.create(this.elementData.type, {"data":this.elementData});

is the one that creates the element, the first argument is the name dom-module

and the second is the JSON object that will be bound to the properties of the element. this.appendChild(this.element);

then add it to dom

All in a call this.async

for smoother display

Then you need a dom-repeat that will call this element and give it the data it needs to create the dynamic ones. Here's an example element-list

, but you don't need a specific element for this, this logic can be larger.

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

<link rel="import" href="element-wrapper">
<dom-module id="element-list">
    <template>
        <style is="custom-style" include="shared-styles"></style>
        <template is="dom-repeat" items="[[ datas ]]" initial-count="10" as="data">
            <element-wrapper element-data="[[data]]"></element-wrapper>
        </template>
    </template>
    <script>
        Polymer({
            is: 'element-list',
            properties: {
                datas: {
                    type: Array,
                    value: function () {
                        return [];
                    }
                }
            }
        });
    </script>
</dom-module>

      

        
        
        
      

    

This should do the trick :)