Geek Answers Handbook

What is the correct way to clone a polymer element?

I'm trying to clone polymer elements - usually elements created from data of some kind, so you don't just need to create a new instance of the template using the constructor or document.createElement.

  • element.cloneNode does not work on its own since it does not copy the shadow root
  • lodashproposed by Polymer Cloning Objects seems to do nothing (the cloned object is empty)
  • cloneEl.shadowRoot.innerHTML = sourceEl.shadowRoot.innerHTML; copies the shadow root, but seems to lose its binding

Extensive example: http://jsbin.com/vitumuwayu/3/edit

Is there a function Polymer.cloneNodethat I could not find?

+4
source share
2 answers

I finally found the answer to this question (at least for Polymer 1.0).

fooobar.com/questions/758686/... , . fooobar.com/questions/1585905/... , .

:

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

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>
Hide result
+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;
};
0

More articles:


All Articles