Polymer 将 child 动态附加到 javascript 中的内容元素

Question

我正在构建一个聚合物元素托管框架，用户可以在其中使用 header 配置他们希望在外框架内托管的项目。例如，如果内容设置为 'paper-button' 主机将显示带有工具栏的按钮。我在哪里添加 appendChild 代码，它不适用于 ready 或 attached 事件？

<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>

Answer 1

可以通过this得到Polymer的dom，调用结果的appendChild，传递customElement:

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

Answer 2

查看 Polymer 的 selector。要在元素的本地 DOM 中定位动态创建的节点，请使用 $$ 方法：

this.$$(选择器)

Polymer 将 child 动态附加到 javascript 中的内容元素

Polymer dynamically append child to content element in javascript

javascript

polymer

polymer-1.0