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">
    <meta name="viewport" content="width=device-width">
    <title>Emoji custom elements?</title>
    
    <style>
      omg-🙀, omg-cat{
        background: red;
        height: 50px;
        width: 50px;
        padding: 10px;
        display: block;
        margin-bottom: 20px;
      }
    </style>
    
  </head>
  <body>
    <omg-🙀></omg-🙀>
    <omg-cat></omg-cat>
  </body>
  <script>
    
    var protoCat = Object.create(HTMLElement.prototype);
    var protoEmoji = Object.create(HTMLElement.prototype);
​
    protoCat.attachedCallback = function() {
      console.log('text cat attached');
      this.innerHTML = "emoji!";
    };
    protoEmoji.attachedCallback = function() {
      console.log('emoji cat attached');
      this.innerHTML = "cat!";
    };
​
    document.registerElement('omg-\u1F640', {prototype: protoEmoji});
    document.registerElement('omg-cat', {prototype: protoCat});
  </script>
​
</html>
 
​
Output

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

Dismiss x
public
Bin info
notwaldorfpro
0viewers