Determine event target in Shadow DOM correctly

fixtures/dom/src/components/Header.js

@@ -64,6 +64,7 @@ class Header extends React.Component {
                 <option value="/event-pooling">Event Pooling</option>
                 <option value="/custom-elements">Custom Elements</option>
                 <option value="/media-events">Media Events</option>
+                <option value="/shadow-dom">Shadow DOM</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/fixtures/index.js

@@ -11,6 +11,7 @@ import ErrorHandling from './error-handling';
 import EventPooling from './event-pooling';
 import CustomElementFixtures from './custom-elements';
 import MediaEventsFixtures from './media-events';
+import ShadowDom from './shadow-dom';
 
 const React = window.React;
 
@@ -46,6 +47,8 @@ function FixturesPage() {
       return <CustomElementFixtures />;
     case '/media-events':
       return <MediaEventsFixtures />;
+    case '/shadow-dom':
+      return <ShadowDom />;
     default:
       return <p>Please select a test fixture.</p>;
   }

fixtures/dom/src/components/fixtures/shadow-dom/index.js

@@ -0,0 +1,67 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const SUPPORTS_SHADOW_DOM = 'attachShadow' in HTMLElement.prototype;
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+class SelectFixture extends React.Component {
+  render() {
+    if (!SUPPORTS_SHADOW_DOM) {
+      return (
+        <div>Browser does not support Shadow DOM, no tests to execute.</div>
+      );
+    }
+
+    return (
+      <FixtureSet title="Shadow DOM" description="">
+        <TestCase title="Event listeners in shadow-dom" relatedIssues="4963">
+          <TestCase.Steps>
+            <li>Click on the orange box</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The box should turn green
+          </TestCase.ExpectedResult>
+          <Shadow>
+            <Box />
+          </Shadow>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+class Shadow extends React.Component {
+  componentDidMount() {
+    this.ref.attachShadow({mode: 'open'});
+    const el = document.createElement('div');
+    this.ref.shadowRoot.appendChild(el);
+    ReactDOM.render(this.props.children, el);
+  }
+
+  render() {
+    return <div ref={ref => (this.ref = ref)} />;
+  }
+}
+
+class Box extends React.Component {
+  state = {active: false};
+
+  render() {
+    const style = {
+      height: 100,
+      background: this.state.active ? 'green' : 'orange',
+      color: 'white',
+      marginBottom: 20,
+    };
+    return (
+      <div
+        onClick={() => this.setState({active: !this.state.active})}
+        style={style}
+      />
+    );
+  }
+}
+
+export default SelectFixture;

packages/react-dom/src/events/getEventTarget.js

@@ -17,6 +17,12 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
 function getEventTarget(nativeEvent) {
   let target = nativeEvent.target || window;
 
+  // If composed / inside open shadow-dom use first item of composed path #9242
+  if (nativeEvent.composed && typeof nativeEvent.composedPath === 'function') {
+    const path = nativeEvent.composedPath();
+    target = path[0];
+  }
+
   // Normalize SVG <use> element events #4963
   if (target.correspondingUseElement) {
     target = target.correspondingUseElement;