Micro-Frontend Example with mfe-react
Host react version: 18.1.0
Counter stored as state in the host app: 0
Simulating a slow-loading component...
Offer a button to increment host counter above, which gets passed to other components.
Throw an error that is caught with a custom error handler component.
Trapped Error: ReferenceError: ThisWillThrowAnError is not defined
Display a static fallback component when a dynamic MFE fails to load
A Plain Javascript component that exposes mount() and update().
Plain Javascript MFE. Press any increment counter button to update this MFE with new value.
A Plain Javascript component that has a trapped error.
MFE Component Error: ReferenceError: MissingFunction is not defined
A Vue3 SFC (Single-File-Component)
This output is generated from a Vue component! Count: 0
Even a component in a different framework can share methods through props!
SolidJS Component
A component built using the SolidJS Framework
SolidJS Component
Count: 0
An MFE that contains a global style rule that affects the host.
This component contains a style block with a destructive global style that changes all buttons.
<style>button { color:blue !important; }</style>This style bleeds out and affects all buttons on the page, outside of this MFE.
Guard against style bleed-out using ShadowDOM.