Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <x-foo></x-foo>
    <script>
      class XFoo extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({mode: 'open'});
          this.shadowRoot.innerHTML = `<button>click me</button>`;
        }
      }
      customElements.define('x-foo', XFoo);
      
      document.querySelector('x-foo')
        .addEventListener('click', function(e) {
          console.log('target', e.target.nodeName);
          console.log('path[0]', e.composedPath()[0].nodeName);
      })
    </script>
  </body>
</html>
Output 300px

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

Dismiss x
public
Bin info
robdodsonpro
0viewers