如何使用 Polymer 添加动态扩展元素？答案

【问题标题】：How to add dynamically extended element with Polymer?如何使用 Polymer 添加动态扩展元素？
【发布时间】：2015-05-09 13:14:16
【问题描述】：

我有按钮：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-input/core-input.html">

<polymer-element name="count-button" extends="button" on-click="increment">
  <template>
    <content>Increment: </content>
  </template>

  <script>
    Polymer({
      counter: 0,
      increment: function(e, detail, sender) {
          this.counter++;
          alert(this.counter);
      }
    })
  </script>
</polymer-element>

我在html中成功使用了：

<button is="count-button"></button>

如何在js中添加这样的按钮？我的错误版本是（ready函数）：

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

<polymer-element name='my-input'>
    <template>
        my input
        <style>
        </style>
    </template>
    <script>
        Polymer('my-input', {
            publish: {
            },
            ready: function() {
                var node = document.createElement("button");
                node.setAttribute('is', 'count-button');
                this.shadowRoot.appendChild(node);
            }
        });
    </script>
</polymer-element>

【问题讨论】：

标签： javascript polymer extends

【解决方案1】：

我自己找到了解决方案，就像这两行一样简单：

var node = document.createElement("button", 'count-button');
this.shadowRoot.appendChild(node);

所以完整的答案在这里：

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

<polymer-element name='my-input'>
    <template>
        my input
        <style>
        </style>
    </template>
    <script>
        Polymer('my-input', {
            publish: {
            },
            ready: function() {
                # only these 2 lines
                var node = document.createElement("button", 'count-button');
                this.shadowRoot.appendChild(node);
            }
        });
    </script>
</polymer-element>

【讨论】：