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>JS Bin</title>
</head>
<body>
  <x-foo></x-foo>
  
  <script>
    document.webkitRegister('x-foo', {
      prototype: Object.create(HTMLElement.prototype, {
        ready: { value: 0, writable: true},
        inserted: { value: 0, writable: true},
        removed: { value: 0, writable: true},
        isXFoo: {
          value: true
        },
        readyCallback: {
          value: function() {
            this.ready++;
          }
        },
        insertedCallback: {
          value: function() {
            this.inserted++;
          }
        },
        removedCallback: {
          value: function() {
            this.removed++;
          }
        }
      })
    });
    
    var xFoo = document.createElement('x-foo');
    document.body.appendChild(xFoo);
    
    Array.prototype.forEach.call(document.querySelectorAll('x-foo'),
      function(node) {
        node.remove();
        console.log('upgraded:', node.isXFoo);
        console.log('ready', node.ready, 'expected', 1);
        console.log('inserted', node.inserted, 'expected', 1);
        console.log('removed', node.removed, 'expected', 1);
        console.log('***');
      }
    );
    
  </script>
  
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers