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>
  <title>polymer</title>
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <link rel="import" href="http://polygit.org/components/paper-button/paper-button.html">
</head>
<body>
​
<dom-module id="x-test">
  <template>
    <div id="container"></div>
  </template>
</dom-module>
  <script>      
    Polymer({
      is: 'x-test', 
      ready: function() {  
        
        // Declare custom elements 
        var customElements = [
          {name:'paper-button', title:'A'},
          {name:'paper-button', title:'B'},
          {name:'paper-button', title:'C'},
          {name:'paper-button', title:'D'},
        ];
        
        // Declare auto-binding, as we are at the root HTML document
        var domBind = document.createElement('template', 'dom-bind');
        domBind.customElements = customElements;
        var domBindDocument = domBind.content.ownerDocument;
        
        // Declare custom elements 
        for (var i in domBind.customElements) {
          var item = domBind.customElements[i];
          var elem = domBindDocument.createElement(item.name);      
          elem.setAttribute('raised', 1);
          elem.innerHTML = item.title;        
          domBind.content.appendChild(elem);
        }
        
        // Append to #container
        this.$.container.appendChild(domBind);
      }
    });
</script> 
<x-test></x-test>
</body>
</html>
 
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers