在自定義元素中使用Polymer shadow dom的麻煩

Question

我正在嘗試創建一個定制的聚合物元素。 它需要向div容器添加新標簽。

這是一個例子：

<dom-module id="my-element">
  <template>
    <div id="container"></div>
  </template>
  <script>
    Polymer({
      is: 'my-element',
      someHandler: function() {
        var el = document.createElement('span');
        this.$.container.appendChild(el);
      }
    });
  </script>
</dom-module>

但是，如果我將此元素添加到我的布局兩次並在第二個元素上調用someHandler() ，它會將span添加到第一個元素。 怎么了？ 怎么解決？

Answer 1

要使用JavaScript操作節點，必須使用Polymer的API。 這是文檔頁面所說的內容：

注意：所有DOM操作都必須使用此API，而不是直接在節點上使用DOM API。

在您的代碼中，要添加子節點，您應該寫：

Polymer.dom(this.$.container).appendChild(el);

我認為這也是出於性能原因，但正如您所看到的，它似乎也與Polymer以某種方式管理其節點有關。