在自定义元素中使用聚合物阴影 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()，它会将跨度添加到第一个元素。怎么了？如何解决？

Answer 1

要使用 JavaScript 操作节点，您必须使用 Polymer 的 API。 documentation page 是这样说的：

Note: All DOM manipulation must use this API, as opposed to DOM API directly on nodes.

在你的代码中，要添加一个子节点，你应该这样写：

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

我认为这也是出于性能原因，但如您所见，它似乎也与 Polymer 以某种方式管理其节点的方式有关。

在自定义元素中使用聚合物阴影 dom 时出现问题

Troubles using Polymer shadow dom inside custom element

javascript

polymer

polymer-1.0