title: Bubbled event in StencilJs does not have correct event.target
body: <p>I started with Stencil some time ago and today I did an experiment with event bubbling. </p>
  
  <p>Basically, I clicked on a child element and listened on its parent for <code>mousedown</code>. What I expected was that <code>event.target</code> to be my child component. This is super simple, for example if I run this test with regular DOM elements (not Stencil) it all works as expected</p>
  
  <p><a href="https://i.stack.imgur.com/ycjPe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ycjPe.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/tL3ugdzp/2/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>But in Stencil <code>event.target</code> is the parent element. Here is what I did. My parent component looks like this:</p>
  
  <pre><code>@Component({
      tag: 'app-root',
      styleUrl: 'app-root.scss',
      shadow: true 
  })
  export class MyApp {
      @Listen('mousedown')
      onMousedown(event) {
           console.log(event.target, event.currentTarget);
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;my-element&gt;&lt;/my-element&gt;
             &lt;/div&gt; );
     }
  }
  </code></pre>
  
  <p>And the child </p>
  
  <pre><code>@Component({
      tag: 'my-element',
      styleUrl: './my-element.scss',
      shadow: true
  })
  export class MyElement {
      @Listen('mousedown')
      onMouseDonw(e) {
          console.log(e.target);
      }
  
      render() {
         return ( &lt;div&gt;YO&lt;/div&gt; );
      }
  }
  </code></pre>
  
  <p>Now, as I said, when I click <code>my-element</code>, I first see the <code>console.log</code> from <code>my-element</code>, which confirms that <code>event.target</code> is <code>my-element</code>. But then the event arrives at its parent and <code>event.target</code> (but also <code>event.currentTarget</code>) contains <code>app-root</code>.  I noticed that when I set <code>shadow</code> to <code>false</code> of my <code>app-root</code> it all seems to work, but I don't understand why, and is this the only solution to my problem?</p>