JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<script>Polymer = {dom: 'shadow'};</script>
<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-list/iron-list.html">
<link rel="import" href="paper-item/paper-item.html">

<dom-module id="x-foo">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }
      section {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      iron-list {
        flex: 1;
      }
    </style>
    <h1>
      This is a page
    </h1>
    <section>
      <h3>Here's one section</h3>
      <template is="dom-repeat" items="[[fewItems]]">
        <paper-item>[[item]]</paper-item>
      </template>
    </section>
    <section>
      <h3>Here's a longer section</h3>
      <iron-list id="list2" items="[[manyItems]]">
        <template>
          <paper-item>[[item]]</paper-item>
        </template> 
      </iron-list>
    </section>
    <section>
      <h3>Here's another longer section</h3>
      <iron-list id="list3" items="[[manyItems2]]">
        <template>
          <paper-item>[[item]]</paper-item>
        </template> 
      </iron-list>
    </section>
  </template>
</dom-module>

<x-foo></x-foo>

CSS

html, body {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
x-foo {
  height: 600px;
  overflow: auto;
}

JavaScript

function makeItems(n, s) {
  var arr = [];
  for (var i = 0; i < n; i++)
    arr.push(s + i);
  return arr;
}

Polymer({
  is: 'x-foo',
  properties: {
    fewItems: {
      type: Array,
      value: function() { return makeItems(4, 'Section 1 Item '); },
    },
    manyItems: {
      type: Array,
      value: function() { return makeItems(1000, 'Section 2 Item '); },
    },
    manyItems2: {
      type: Array,
      value: function() { return makeItems(1000, 'Section 3 Item '); },
    },
  },
  ready: function() {
    [this.$.list2, this.$.list3].forEach(function(list) {
      //list.scrollTarget = this;
      window[list.id] = list;
      setInterval(function() {
        console.log(list.id + ', # items rendered: ' + list._physicalItems.length);
      }, 1000);
    }.bind(this));
  }
});