Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
  <!-- Polyfills only needed for Firefox and Edge. -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <!-- Loads natively on browsers that support Javascript modules like
       Chrome, Safari, Firefox 60, Edge 16. For all others, use a
       module-compatible toolchain like Polymer CLI, WebPack, or Rollup -->
  <script type="module">
    import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';
    import 'https://unpkg.com/@polymer/iron-list/iron-list.js?module';
​
    class MyElement extends PolymerElement {
​
      static get properties() {
        return {
          items: {
            type: Array,
            value: function() {
              return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
            }
          }
        };
      }
​
      static get template() {
        return html`
          <style>
            :host {
              display: block;
            }
​
            iron-list {
              height: 100vh;
            }
​
            .item {
              border-bottom: 1px solid #eee;
              height: 20vh;
            }
          </style>
          <iron-list items="[[items]]">
            <template>
              <div class="item">Item [[index]]</div>
            </template>
          </iron-list>
        `;
      }
    }
​
    customElements.define('my-element', MyElement);
  </script>
  
  <my-element></my-element>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
keanuleepro
0viewers