Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html>
<body>
  <style>
    x-foo {
      display: block;
      min-height: 10px;
      border: 2px solid green;
    }
  </style>
    
  <script>
    customElements.define('x-foo', class extends HTMLElement {
      connectedCallback() {
        this.textContent = this.localName + ': customized';
      }                   
    });
    const doc = document.implementation.createHTMLDocument();
    const div = doc.createElement('div');
    div.innerHTML = 'Created by innerHTML:<x-foo></x-foo>';
    div.appendChild(doc.createTextNode('Created by createElement():'));
    div.appendChild(doc.createElement('x-foo'));
    document.body.appendChild(div);
  </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
keanuleepro
0viewers