Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <host1>
    <child1>C</child1>
  </host1>
  <script>
    var root1 = document.querySelector('host1').createShadowRoot();
    root1.innerHTML = '<host2><content></content></host2>';
    var content = root1.querySelector('content');
    content.addEventListener('test', function() {
      console.log('content event');
    });
    var root2 = root1.querySelector('host2').createShadowRoot();
    root2.innerHTML = '';
    var child1 = document.querySelector('child1');
    child1.dispatchEvent(new CustomEvent('test', {bubbles: true}));
  </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers