Unfortunately, if you use WebComponents you already introduce "global window magic" as these need to be registered globally. That's actually far more worse as you'll need to have a proper naming scheme here. For instance, you cannot register the same name twice. So two microfrontends cannot register a custom element my-dropdown. Going beyond web components your custom events (as outlined in the article) are placed somewhere, too. Where do you add the listener here?
If you need decoupling you'll need a way to decouple. window (or any global) is one way - not the recommended way, but certainly a possibility and easy to illustrate.
Also if you have a web component from microfrontend A hosted at #mife-a and another web component from microfrontend B hosted at #mife-b how should they reach each other? They don't know each other and as such one component cannot determine the attributes of the other.
I think your comment is rather reflects that you did not really get in touch with the subject in full detail.
Why do you think passing down props and listening to events is not decoupling? It is an interface and you listen to the events on the custom element itself. Clear and straightforward. How can you even communicate if you don't know the interface of the other one?
Name collision is an issue with any of the aforementioned solutions...you need a naming convention...if you have the same names, it hurts any of them.
Why seeing something as over architected makes me look as I haven't done micro frontends before?
You cannot pass down props (or attributes) because they are both in different areas and don't know each other (otherwise see the aggregator component - there you can do exactly what you want to do but in a safe and decoupled way).
I think you misunderstood the point.
Unfortunately, if you use WebComponents you already introduce "global window magic" as these need to be registered globally. That's actually far more worse as you'll need to have a proper naming scheme here. For instance, you cannot register the same name twice. So two microfrontends cannot register a custom element
my-dropdown. Going beyond web components your custom events (as outlined in the article) are placed somewhere, too. Where do you add the listener here?If you need decoupling you'll need a way to decouple.
window(or any global) is one way - not the recommended way, but certainly a possibility and easy to illustrate.Also if you have a web component from microfrontend A hosted at
#mife-aand another web component from microfrontend B hosted at#mife-bhow should they reach each other? They don't know each other and as such one component cannot determine the attributes of the other.I think your comment is rather reflects that you did not really get in touch with the subject in full detail.
Why do you think passing down props and listening to events is not decoupling? It is an interface and you listen to the events on the custom element itself. Clear and straightforward. How can you even communicate if you don't know the interface of the other one?
Name collision is an issue with any of the aforementioned solutions...you need a naming convention...if you have the same names, it hurts any of them.
Why seeing something as over architected makes me look as I haven't done micro frontends before?
You cannot pass down props (or attributes) because they are both in different areas and don't know each other (otherwise see the aggregator component - there you can do exactly what you want to do but in a safe and decoupled way).
Sry I've meant attributes. You can get really far with attributes and events if the teams can agree upon the interface and doesn't change it often.