克隆聚合物元件的正确方法是什么？

Question

我一直在尝试克隆聚合物元素 - 通常是从某种数据创建的元素，因此不能只使用构造函数或 document.createElement 创建模板的新实例.

element.cloneNode 不能单独工作，因为它不复制 shadow-root
lodash Polymer Clone Objects 提议似乎没有做任何事情（克隆的对象是空的）
cloneEl.shadowRoot.innerHTML = sourceEl.shadowRoot.innerHTML; 复制影子根，但似乎失去了绑定

广泛示例：http://jsbin.com/vitumuwayu/3/edit

有没有我找不到的Polymer.cloneNode函数？

Answer 1

我终于找到了这个问题的答案（至少对于 Polymer 1.0）。

展示了如何复制属性。描述了如何获取聚合物元素的属性列表。

那么答案是：

newElement = element.cloneNode(true);
for(var i in element.properties) {
            newElement[i] = element[i]
          }

完整的插图和工作示例 on jsbin 或在下面的代码片段中。

<!DOCTYPE html>

<html>

<head>

  <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/polymer/polymer.html">



  <meta charset="utf-8">
  <title>Polymer Cloning Example</title>
</head>

<dom-module id="custom-element">
  <template>
    <div style="border: solid">
      <input type="text" name="some_string" value="{{boundvalue::input}}">
      <p>{{boundvalue}}</p>
    </div>

  </template>
  <script>
    Polymer({
      is: 'custom-element',
      properties: {
        boundvalue: {
          type: String,
          value: 'Enter some text...',
          notify: true
        }
      }
    });
  </script>
  </dom-module>



  <body>

    <custom-element id="source-element"></custom-element>
    <p>
      <button onclick="cloneElementWithoutProperties()">1 Clone the above element into the list below</button>
      <p></p>
      <button onclick="cloneElementWithProperties()">2 Clone the above element into the list below and also copy properties</button>
      <p></p>


      <h3>Test Description</h3>
      <ol>
        <li>Modify text above</li>
        <li>Click Button 1</li>
        <p></p>
        <p>Observed: An element is added below, but it is reset to the original text ('Enter some text...')</p>
        <li>Click Button 2</li>
        <p></p>
        <p>Observed: An element is added below, and it keeps the modified text</p>
        <p>Also verify that the functionality is still ok: Modify the input in the copy, the text is also updated</p>


      </ol>


      <h3>List of cloned elements:</h3>
      <div id='list-elements'>
      </div>

  </body>

</html>

<script>
  function cloneElementWithProperties() {

    list = document.querySelector("#list-elements");
    sourceEl = document.querySelector("#source-element")
    cloneEl = sourceEl.cloneNode(true);
    for (var i in sourceEl.properties) {
      cloneEl[i] = sourceEl[i];
    }
    list.insertBefore(cloneEl, null);

  }

  function cloneElementWithoutProperties() {

    list = document.querySelector("#list-elements");
    sourceEl = document.querySelector("#source-element")
    cloneEl = sourceEl.cloneNode(true);
    list.insertBefore(cloneEl, null);

  }
</script>

Answer 2

这是我的克隆函数。

var clone = function(orig) {
    var ret = orig.cloneNode();
    var lightDom;
    var childNodes;
    if (orig.is && orig.is.toUpperCase() === orig.tagName) {
        lightDom = Polymer.dom(ret);
        childNodes = Polymer.dom(orig).childNodes;
    } else {
        lightDom = ret;
        childNodes = orig.childNodes;
    }
    for (var i = 0; i < childNodes.length; i++) {
        lightDom.appendChild(clone(childNodes[i]));
    }
    return ret;
};

克隆聚合物元件的正确方法是什么？

What is the correct way to clone a polymer element?

polymer