JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="parent-element">
    <template>
        <p>I'm <b>parent-element</b>.</p>
        <div id="iterator">
          <template is="dom-repeat" items="[[list]]">
            <child-element id="{{item.id}}"></child-element>
          </template>
        </div>
        <button on-tap="handleTap">Clone the first one</button>
    </template>
    <script>
      Polymer({
          is: "parent-element",
          properties: {
          },
          handleTap: function() {
          	var children = document.getElementsByTagName('child-element');
            var toClone = children[0];
            var clone = toClone.cloneNode(false);
            console.log(clone);
            this.$.iterator.appendChild(clone);
          },
          ready: function () {
              this.list = [
              	{ id: 1, something: "lorem"},
                { id: 2, something: "ipsum"},
                { id: 3, something: "dolor"},
                { id: 4, something: "sit"},
                { id: 5, something: "amet"}
              ];
          }
      });
    </script>
</dom-module>

<dom-module id="child-element">
    <template>
        <p>I'm <b>child-element</b> {{id}}.</p>
    </template>
    <script>
      Polymer({
          is: "child-element",
          properties: {
          },
          ready: function () {
              //...
          }
      });
    </script>
</dom-module>

<parent-element></parent-element>

CSS

parent-element {
  border: 1px solid blue;
  margin: 5px;
  display: block;
}

child-element {
  border: 1px solid lime;
  margin: 5px;
  display: block;
}