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>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import"
          href="http://www.polymer-project.org/components/polymer/polymer.html">
    <polymer-element name="my-element">
      <template>
        <div id="foo">
          <p>Old foo</p>
          <template if="{{showBar}}">
            <div id="bar">
              <p>Old bar</p>
            </div>
          </template>
        </div>
        <button on-tap="{{changeContent}}">Change Content</button>
      </template>
      <script>
        Polymer({
          showBar: true,
          changeContent: function() {
            this.$.foo.querySelector('p').textContent = 'New foo';
            this.$.bar.querySelector('p').textContent = 'New bar';
          }
        });
      </script>
    </polymer-element>
    <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
shailenpro
0viewers