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 subclassing sample</title>
  
<script src="http://www.polymer-project.org/polymer/polymer.min.js"></script>
  
<element name="plain-button" extends="button">
    <template>
        <button>
            <content></content>
        </button>
    </template>
    <script>
    Polymer.register( this, {
        ready: function() {
            this.log();
        },
        log: function() {
            console.log( "plain-button" );
        }
    });
    </script>
</element>
  
<element name="icon-button" extends="plain-button" attributes="icon">
    <template>
        <plain-button>
            <img src="{{icon}}">
            <content></content>
        </plain-button>
    </template>
    <script>
    Polymer.register( this, {
        log: function() {
            console.log( "icon-button" );
        }
    });
    </script>
</element>
​
</head>
​
<body>
<plain-button>Plain button</plain-button>
<icon-button icon="http://janmiksovsky.github.io/quetzal/resources/document_alt_stroke_12x16.png">Icon button</icon-button>
</body>
​
</html>
​
Output 300px

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

Dismiss x
public
Bin info
Jan_Miksovskypro
0viewers