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>Web Components</title>
  <script src="//www.polymer-project.org/components/platform/platform.js"></script>
  <link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
​
  <polymer-element name="x-randgen" attributes="max">
    <script>
      Polymer('x-randgen', {
        n:3,
        next: function () {
          return Math.floor(this.max * Math.random());
        }
      });
    </script>  
  </polymer-element>
  
  <polymer-element name="x-foo">
    <template>
      <button on-click="{{doRand}}">Next Random</button> {{n}}
    </template>
    <script>
      Polymer('x-foo', {
        n: 0,
        attached: function () { 
          this.randgen = this.getRandGen();
        },
        doRand: function () {
          this.n = this.randgen.next();
        },
        getRandGen: function () {
          var root = this;
          while (root.parentNode) {
            root = root.parentNode;
          }
          return root.querySelector('x-randgen');
        }
      });
    </script>
  </polymer-element>
​
  <polymer-element name="x-bar" noscript>
    <template>
      <div>
        <x-randgen max="1000"></x-randgen>
        <x-foo></x-foo>
      </div>
    </template>
  </polymer-element>
      
  <h1> Using x-randgen in global context</h1>
  <x-randgen max="10"></x-randgen>
  <x-foo></x-foo>
  
  <h1> Using x-randgen within a template context</h1>
  <x-bar></x-bar>
    
</body>
</html>
Output

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

Dismiss x
public
Bin info
sjmilespro
0viewers