feat(components): Support passing shadow root as document

src/store/actions.ts

@@ -42,6 +42,11 @@ export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc) =>
     onConnectEnd,
   });
 
+export const setDocument = (document: Document | ShadowRoot) =>
+  createAction(constants.SET_DOCUMENT, {
+    document
+  })
+
 export const setElements = (elements: Elements) => createAction(constants.SET_ELEMENTS, elements);
 
 export const updateNodeDimensions = (updates: NodeDimensionUpdate[]) =>
@@ -160,4 +165,5 @@ export type ReactFlowAction = ReturnType<
   | typeof setMultiSelectionActive
   | typeof setConnectionMode
   | typeof setNodeExtent
+  | typeof setDocument
 >;

src/store/contants.ts

@@ -31,3 +31,4 @@ export const SET_ELEMENTS_SELECTABLE = 'SET_ELEMENTS_SELECTABLE';
 export const SET_MULTI_SELECTION_ACTIVE = 'SET_MULTI_SELECTION_ACTIVE';
 export const SET_CONNECTION_MODE = 'SET_CONNECTION_MODE';
 export const SET_NODE_EXTENT = 'SET_NODE_EXTENT';
+export const SET_DOCUMENT = 'SET_DOCUMENT';

src/store/index.ts

@@ -3,6 +3,7 @@ import configureStore from './configure-store';
 import { ReactFlowState, ConnectionMode } from '../types';
 
 export const initialState: ReactFlowState = {
+  document: window.document,
   width: 0,
   height: 0,
   transform: [0, 0, 1],

src/store/reducer.ts

@@ -334,6 +334,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
     case constants.SET_ELEMENTS_SELECTABLE:
     case constants.SET_MULTI_SELECTION_ACTIVE:
     case constants.SET_CONNECTION_MODE:
+    case constants.SET_DOCUMENT:
       return { ...state, ...action.payload };
     default:
       return state;