JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<base href="http://polygit.org/polymer+:master/components/">
<link rel=import href="polymer/polymer.html">
<link rel=import href="iron-icon/iron-icon.html">
<link rel=import href="iron-icons/iron-icons.html">
<link rel=import href="paper-item/paper-icon-item.html">

<dom-module id="x-foo">
  <template>
    <template is="dom-repeat" items="{{items}}">
      <paper-icon-item>
        <iron-icon item-icon icon="favorite"></iron-icon>
        {{item}}
      </paper-icon-item>
    </template>
  </template>
</dom-module>

<x-foo></x-foo>

CSS

* /deep/ #contentIcon {
  flex-shrink: 0;
}

JavaScript

Polymer({
  is: 'x-foo',
  properties: {
    items: {
      type: Array,
      value: [
        'hello world',
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices dui ut dictum condimentum. Pellentesque dui nunc, scelerisque ac dui sed, facilisis commodo mi. Etiam tempor lacinia lacinia. Vivamus accumsan mollis sapien, quis sodales quam tincidunt eget.',
        'goodbye cruel world',
      ],
    },
  },
});