Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Shadow DOM Event Retargeting</title>
  </head>
  <body>
    <input id="normal-text" type="text" value="I'm normal text">
  
    <div id="host"></div>
    
    <template>
      <input id="shadow-text" type="text" value="I'm shadow text">
    </template>
​
    <script>
      var host = document.querySelector('#host');
      var root = host.createShadowRoot();
      var template = document.querySelector('template');
      root.appendChild(template.content.cloneNode(true));
​
      document.addEventListener('click', function(e) {
        console.log(e.target.id + ' clicked!');
      });
    </script>
  </body>
</html>
Output

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

Dismiss x