如何解决Direflow构建Web Component时Select、MenuItem及Dialog在Shadow Root外渲染的问题？

I've run into this exact issue before when wrapping Material UI components into Web Components with Direflow—those portal-based components like Select's dropdown menu and Dialog love to escape the Shadow DOM by default. Let's break down why your current code isn't working and how to fix it properly.

Why Your Current Approach Fails #

When you use React.createRef() and pass domRef.current directly to MenuProps.container, the ref is still null during the initial render. Material UI falls back to mounting the dropdown to document.body when container is null, which is why you're seeing it outside the Shadow Root. Plus, since it's outside, it doesn't pick up the Shadow DOM-scoped Material UI styles.

Step-by-Step Solution #

1. Use useRef + useEffect to Get a Valid Container Reference #

Instead of relying on the ref during initial render, wait for the component to mount so the ref points to a real DOM element in the Shadow Root. We'll use state to update the container reference once it's available:

import React, { useRef, useEffect, useState } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

const ActionSelector = () => {
  const shadowContainerRef = useRef(null);
  const [menuContainer, setMenuContainer] = useState(null);

  useEffect(() => {
    // Once the component mounts, the ref will have a valid DOM element
    if (shadowContainerRef.current) {
      setMenuContainer(shadowContainerRef.current);
    }
  }, []);

  const onActionChangeHandler = (event) => {
    console.log('Selected action:', event.target.value);
    // Add your handling logic here
  };

  return (
    <div ref={shadowContainerRef}>
      <Select
        labelId="select-label"
        id="select"
        value="none"
        onChange={onActionChangeHandler}
        // Now we pass the valid container reference once it's ready
        MenuProps={{ container: menuContainer }}
      >
        <MenuItem value="none">Choose Action</MenuItem>
        <MenuItem value="changeAddress">Change Address</MenuItem>
        <MenuItem value="addTravelPolicy">Add Travel Policy to Account</MenuItem>
      </Select>
    </div>
  );
};

export default ActionSelector;

2. Apply the Same Fix to Dialog Components #

For Dialogs, use the exact same pattern—specify the container prop to point to your Shadow DOM container:

import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';

// Inside your component
const [dialogOpen, setDialogOpen] = useState(false);

<Dialog
  open={dialogOpen}
  onClose={() => setDialogOpen(false)}
  container={shadowContainerRef.current} // Use the same ref here
>
  <DialogTitle>Your Dialog Content</DialogTitle>
</Dialog>

3. Ensure Styles Are Scoped to the Shadow Root #

Direflow usually handles style scoping for React components, but Material UI's dynamic styles (like those for dropdown menus) need to be injected into the Shadow Root. Double-check your direflow-config.js to ensure Shadow DOM is enabled:

module.exports = {
  shadow: true, // This should be set to true (default in most Direflow versions)
  // Other config options...
};

If you still see missing styles, wrap your component in Material UI's ThemeProvider to ensure the theme's styles are attached to the Shadow Root:

import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme();

// Wrap your component in the ThemeProvider
const WrappedComponent = () => (
  <ThemeProvider theme={theme}>
    <ActionSelector />
  </ThemeProvider>
);

export default WrappedComponent;

Key Takeaways #

• Portal-based Material UI components (Select menus, Dialogs) default to mounting to document.body—you must explicitly set their container prop to a DOM element inside the Shadow Root.
• Use useEffect to wait for the component to mount before passing the ref to the container prop, since refs are only populated after the component renders.
• Ensure Direflow's Shadow DOM mode is enabled to keep styles scoped to your Web Component.

内容的提问来源于stack exchange，提问作者Martyn Bedford