<p dir="auto">The Shadow DOM spec details <a href="http://www.w3.org/TR/shadow-dom/#event-retargeting" rel="nofollow">event retargeting</a>. This basically means that when an event propagation hits a shadow root boundary, it keeps propagating, but the event target is changed to the host element.</p>
<p dir="auto">It's also important to note that <a href="http://www.w3.org/TR/shadow-dom/#events-that-are-always-stopped" rel="nofollow">some event types are never propagated outside of a shadow root</a>.</p>
<p dir="auto">Angular's shadow DOM emulation currently doesn't do this, and it makes it confusing to try to add listeners to events like <code class="notranslate">click</code> and have to use the <code class="notranslate">^click</code> syntax (see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="63343553" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/1040" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/1040/hovercard" href="https://github.com/angular/angular/issues/1040">#1040</a>).</p>