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 Starting Point</title>
    <meta name="description" content="Basic starting point for a Polymer element." />
    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
    <meta charset="utf-8">
  </head>
  <body>
    <polymer-element name="extended-item" extends="div">
      <template>
        <p>This is part of the template.</p>
        <content></content>
      </template>
      
      <script>
        Polymer('extended-item', {
          created: function() {
            console.log('EXTENDED ITEM IS CREATED!');
          },
          ready: function() {
            console.log('EXTENDED ITEM IS READY!');
          },
          attached: function() {
            console.log('EXTENDED ITEM IS ATTACHED!');
          },
          domReady: function() {
            console.log('EXTENDED ITEMS DOM IS READY!');
          },
          detached: function() {
            console.log('EXTENDED ITEM IS DETACHED!');
          },
          attributeChanged: function (attrName, oldVal, newVal)
          {
            //var newVal = this.getAttribute(attrName);
            console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
          }
        });
      </script>
    </polymer-element>
​
    <div is="extended-item">I was extended from div!</div>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
jeffposnickpro
0viewers