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>
    <meta charset=utf-8 />
    <title>Polymer</title>
  </head>
  <body>
​
    <template>
      <h1>Hello World</h1>
      <content id="foo-content" select=".foo"></content>
    </template>
​
    <my-widget>
      <button class="foo">Click Me</button>
    </my-widget>
​
    <script>
      (function() {
        var tmpl = document.querySelector('template');
​
        var WidgetProto = Object.create(HTMLElement.prototype);
​
        WidgetProto.createdCallback = function() {
          this.root_ = this.createShadowRoot();
          this.root_.appendChild(document.importNode(tmpl.content, true));
        };
​
        WidgetProto.attachedCallback = function() {
          var content = this.root_.getElementById('foo-content');
          var btn = content.getDistributedNodes()[0]; // this is our <button>
          btn.addEventListener('click', function() {
            alert('yo i was clicked!');
          });
        };
​
        var Widget = document.registerElement('my-widget', {
          prototype: WidgetProto
        });
      })()
    </script>
  </body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
robdodsonpro
0viewers