| ExternalComponentWrapper.jsx |
A React component that dynamically loads and embeds external custom elements
into the newtab page.
This component serves as a bridge between React's declarative rendering and
browser-native custom elements that are registered and managed outside of
React's control. It:
1. Looks up the component configuration by type from the ExternalComponents
registry
2. Dynamically imports the component's script module (which registers the
custom element)
3. Creates an instance of the custom element using imperative DOM APIs
4. Appends it to a React-managed container div
5. Cleans up the custom element on unmount
This approach is necessary because:
- Custom elements have their own lifecycle separate from React
- They need to be created imperatively (document.createElement) rather than
declaratively (JSX)
- React shouldn't try to diff/reconcile their internal DOM, as they manage
their own shadow DOM
- We need manual cleanup to prevent memory leaks when the component unmounts
@param {object} props
@param {string} props.type - The component type to load (e.g., "SEARCH")
@param {string} props.className - CSS class name(s) to apply to the wrapper div
@param {Function} props.importModule - Function to import modules (for testing)
@param {object} props.props - Properties to assign to the component, where
each key is the property name, and the value is the property value.
|
9931 |
- |