Fix: React cannot render in ShadowRoot (#15894)
* fix: render in shadow root * fix: flow typing * Remove types and turn invariant into warning Co-authored-by: Dan Abramov <dan.abramov@me.com>
Jack Works committed
Aug 17, 2020 at 22:47 UTC
1287670191e8e3bb193c83c18e587ccb8159a4ba
1 file changed
+14
-10
packages/react-dom/src/client/ReactDOMComponent.js
+14
-10
@@ -13,7 +13,6 @@ import {
13
} from '../events/EventRegistry';
14
15
import {canUseDOM} from 'shared/ExecutionEnvironment';
16
-import invariant from 'shared/invariant';
16
17
import {
18
getValueForAttribute,
@@ -66,6 +65,7 @@ import {
65
DOCUMENT_NODE,
66
ELEMENT_NODE,
67
COMMENT_NODE,
68
+ DOCUMENT_FRAGMENT_NODE,
69
} from '../shared/HTMLNodeType';
70
import isCustomComponent from '../shared/isCustomComponent';
71
import possibleStandardNames from '../shared/possibleStandardNames';
@@ -266,15 +266,19 @@ export function ensureListeningTo(
266
rootContainerInstance.nodeType === COMMENT_NODE
267
? rootContainerInstance.parentNode
268
: rootContainerInstance;
269
- // Containers should only ever be element nodes. We do not
270
- // want to register events to document fragments or documents
271
- // with the modern plugin event system.
272
- invariant(
273
- rootContainerElement != null &&
274
- rootContainerElement.nodeType === ELEMENT_NODE,
275
- 'ensureListeningTo(): received a container that was not an element node. ' +
276
- 'This is likely a bug in React.',
277
- );
269
+ if (__DEV__) {
270
+ if (
271
+ rootContainerElement == null ||
272
+ (rootContainerElement.nodeType !== ELEMENT_NODE &&
273
+ // This is to support rendering into a ShadowRoot:
274
+ rootContainerElement.nodeType !== DOCUMENT_FRAGMENT_NODE)
275
+ ) {
276
+ console.error(
277
+ 'ensureListeningTo(): received a container that was not an element node. ' +
278
+ 'This is likely a bug in React. Please file an issue.',
279
+ );
280
+ }
281
+ }
282
listenToReactEvent(
283
reactPropEvent,
284
((rootContainerElement: any): Element),