title: Get event target inside a web component
body: <p>Anchor elements (<code>&lt;a&gt;</code>) are created when the user interacts with a web component. The problem is, that I cannot get the anchor element returned from the &quot;outside&quot; of the web component when an anchor is clicked.</p>
  <p>I add an event listener to <code>document</code> listening for click events. When an element somewhere in the DOM is clicked I expect the <code>e.target</code> to be the clicked element.
  In the case of a click somewhere inside the web component the custom element (<code>&lt;fancy-list&gt;&lt;/fancy-list&gt;</code>) will be returned - not the clicked element.</p>
  <p>When the mode of the shadow DOM is set to <code>open</code> the DOM should be accessible.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Fancylist extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
  
      const wrapper = document.createElement('div');
      wrapper.innerHTML = `&lt;ul&gt;&lt;/ul&gt;&lt;button&gt;Add item&lt;/button&gt;`;
  
      shadow.appendChild(wrapper);
  
      this.on_root_click = this.on_root_click.bind(this);
    }
  
    connectedCallback() {
      this.ul_elm = this.shadowRoot.querySelector('ul');
      this.shadowRoot.addEventListener('click', this.on_root_click, false);
    }
  
    on_root_click(e){
      switch(e.target.nodeName){
        case 'BUTTON':
          this.ul_elm.innerHTML += '&lt;li&gt;&lt;a href="p1"&gt;List item&lt;/a&gt;&lt;/li&gt;';
          break;
        case 'A':
          e.preventDefault();
          console.log('You clicked a link!');
          break;
      }
    }
  }
  
  customElements.define('fancy-list', Fancylist);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;List&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;script type="text/javascript"&gt;
        document.addEventListener('DOMContentLoaded', e =&gt; {
          document.body.addEventListener('click', e =&gt; {
            //console.log(e.composedPath());
            console.log(e.target); // why is this not returning an anchor element when an anchor is clickend inside the &lt;fancy-list&gt;?
          }, false);
        }, false);
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;List&lt;/h1&gt;
    &lt;fancy-list&gt;&lt;/fancy-list&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>