<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
When you render a react component inside a shadow DOM, events will not be dispatched in react. I.e. you do something like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div onClick={() =&gt; alert('I have been clicked')}&gt;foo bar&lt;/div&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s">'I have been clicked'</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>foo bar<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">but nothing happens. Someone investigated this already, got to the bottom of it and wrote a work around: <a href="https://stackoverflow.com/questions/37866237/click-event-not-firing-when-react-component-in-a-shadow-dom" rel="nofollow">https://stackoverflow.com/questions/37866237/click-event-not-firing-when-react-component-in-a-shadow-dom</a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.</strong></p>
<p dir="auto">Following the official docs (<a href="https://facebook.github.io/react/docs/web-components.html" rel="nofollow">https://facebook.github.io/react/docs/web-components.html</a> ):</p>
<p dir="auto"><a href="https://jsfiddle.net/84v837e9/187/" rel="nofollow">https://jsfiddle.net/84v837e9/187/</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Events should be dispatched even when the react app is rendered in a shadow dom</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">All browsers, tested with react 15.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
A React Component with an Event Handler (for example onClick) is rendered inside a Web Component. When the Component is clicked the Event does not receive the React Component (specified callback is not invoked)</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/reactjs/69z2wepo/" rel="nofollow">https://jsfiddle.net/reactjs/69z2wepo/</a>).</strong></p>
<p dir="auto">You can reproduce it with Web Component example contained in the react repository (<a href="https://github.com/facebook/react/blob/master/examples/webcomponents/index.html">https://github.com/facebook/react/blob/master/examples/webcomponents/index.html</a>): Replace the 'a' element with a button and add for example an onClick event handler.</p>
<p dir="auto">You can find a modified version of the Web Component example (based on the 15.4.2 codebase - <a href="https://github.com/facebook/react/blob/v15.4.2/examples/webcomponents/index.html">https://github.com/facebook/react/blob/v15.4.2/examples/webcomponents/index.html</a>) here:<br>
<a href="https://gist.github.com/nilshartmann/3a520920e5fc920bfde49e077ad3beab#file-index-html-L50">https://gist.github.com/nilshartmann/3a520920e5fc920bfde49e077ad3beab#file-index-html-L50</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The event handler should be called.</p>
<p dir="auto">For testing I have modified <code class="notranslate">getEventTarget.js</code> to return the target from the <code class="notranslate">path</code> property of the <code class="notranslate">nativeEvent</code> (instead of the "original" <code class="notranslate">target</code> from the <code class="notranslate">nativeEvent</code>). With this addition it works -<br>
the Event Handler is called.</p>
<p dir="auto">You can find the modified version also in the gist: <a href="https://gist.github.com/nilshartmann/3a520920e5fc920bfde49e077ad3beab#file-geteventtarget-js-L6">https://gist.github.com/nilshartmann/3a520920e5fc920bfde49e077ad3beab#file-geteventtarget-js-L6</a></p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
15.4.x and 16.x<br>
I've tested in Chrome, Firefox and Safari. I don't know if it works in previous versions of React (don't think so)</p>