CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
anivas
anivas

Reputation: 6547

Polymer dynamically append child to content element in javascript

I am building a polymer element hosting frame, where the user can configure what item they want to be hosted inside the outerframe with header. For instance if the content is set to 'paper-button' the host will display the button with toolbar. Where do I add the appendChild code, it doesn't work on ready or attached event?

<dom-module id="element-host">
    <template>
        <paper-header-panel>
            <paper-toolbar>Header</paper-toolbar>
            <content id="content"></content>
        </paper-header-panel>
    </template>
    <script>
        Polymer({
            is: 'element-host',
            properties: {
                content : {
                    type: string
                }
            },
            attached: function(renderer) {
                var customElement = document.createElement(this.content);
                this.$.content.appendChild(customElement);
            }
        });
    </script>
</dom-module>

Upvotes: 1

Views: 3739

Answers (2)

bubmacbub
bubmacbub

Reputation: 11

Check out Polymer's selector. For locating dynamically-created nodes in your element’s local DOM, use the $$ method:

this.$$(selector)

Upvotes: -1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657068

You can get the dom of Polymer by passing this and call the appendChild of the result, passing customElement:

Polymer.dom(this).appendChild(customElement);

Upvotes: 4

Related Questions