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>
      <button id="btn">Click me</button>
    </template>
​
    <script>
      var tmpl = document.querySelector('template');
​
      var WidgetProto = Object.create(HTMLElement.prototype);
​
      WidgetProto.createdCallback = function() {
        var root = this.createShadowRoot();
        root.appendChild(document.importNode(tmpl.content, true));
        var btn = root.querySelector('#btn');
        btn.addEventListener('click', this.fireBtn.bind(this));
      };
​
      WidgetProto.fireBtn = function() {
        this.dispatchEvent(new Event('btn-clicked'));
      };
​
      var Widget = document.registerElement('my-widget', {
        prototype: WidgetProto
      });
    </script>
​
    <!-- Use the element -->
    <my-widget></my-widget>
​
    <!-- Listen for its click event -->
    <script>
      var widget = document.querySelector('my-widget');
      widget.addEventListener('btn-clicked', function() {
        alert('the button was clicked');
      });
    </script>
​
​
  </body>
</html>
Output

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

Dismiss x
public
Bin info
robdodsonpro
0viewers