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/app-layout/app-toolbar/app-toolbar.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 {
              height: 100vh;
              display: flex;
              flex-direction: column;
            }
​
            iron-list {
              flex: 1;
            }
​
            app-toolbar {
              background-color: #4285f4;
              color: white;
            }
​
            .item {
              border-bottom: 1px solid #eee;
              height: 20vh;
            }
          </style>
          <app-toolbar>App name</app-toolbar>
          <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