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>
<script>
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  
  var newDoc = iframe.contentDocument;
  
  var proto1 = Object.create(HTMLElement.prototype),
      proto2 = Object.create(HTMLElement.prototype);
  
  proto1.createdCallback = function() { this.innerHTML = 'Private doc element' };
  proto2.createdCallback = function() { this.innerHTML = 'Public doc element' };
  
  newDoc.registerElement('my-element', { prototype: proto1 });
  document.registerElement('my-element', { prototype: proto2 });
  
  var myEl1 = newDoc.createElement('my-element');
  var myEl2 = document.createElement('my-element');
  
  myEl1.style.display = 'block';
  myEl2.style.display = 'block';
  
  document.body.appendChild(myEl1);
  document.body.appendChild(myEl2);
</script>
</body>
</html>
 
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers