JSFiddle - React, Tailwind, and code Playground

by gabriela b

HTML

<base href="http://polygit.org/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-list/iron-list.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<dom-module id="a-test">
    <template>
    
     <paper-icon-button icon="add" on-tap="_add"></paper-icon-button>
    
    
 <iron-list id="list" items="{{words}}">
            <template>
                <paper-item>Item: <span>[[item]]</span>
                    <paper-icon-button icon="clear" on-tap="_clear"></paper-icon-button>
                </paper-item>
            </template>
        </iron-list>

  <content id="templates" select="template.member"></content>
  
  </template>
</dom-module>






<base href="http://polygit.org/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-list/iron-list.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<dom-module id="item-content">
   <template>
     <a-test>
       <template class="member">
         <item-edit></item-edit>
      </template>
      </a-test>
    </template>
</dom-module>


<item-content></item-content>


<base href="http://polygit.org/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-list/iron-list.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<dom-module id="item-edit">
    <template>
      <div  class="editForm editor">
        ABC
      </div>
    </template>
</dom-module>

CSS

iron-list {
  height: 200px;
}

JavaScript

Polymer({
     is: 'a-test',
    properties: {
        words: {
            type: Array,
            value: function() {
                var arr = [];
                for (var i = 0; i < 26; i++)
                    arr.push(String.fromCharCode(65 + i));
                return arr;
            },
        },
    },
    ready: function() {
    },
    _clear: function(e) {
        this.arrayDelete('words', e.model.item);
        this.$.list.scrollToIndex(this.words.length - 1);
    },
     _add:function(){
     	var template = Polymer.dom(this.$.templates).getDistributedNodes()[0];
						this.templatize(template);

						var clone = this.stamp({});
						clone.itemToEdit = 'abcde';
						theDom.appendChild(clone.root);
     }
    
});

Polymer({
     is: 'item-edit',
    properties: {
    },
    ready: function() {
    }    
});

Polymer({
     is: 'item-content',
    properties: {
    },
    ready: function() {
    }    
});