Whether single-spa can support multiple versions of same custom elements from different micro frontends loaded in SPA

[msbasanth]

Basic problem: Name collision in custom elements (LitElement) due to global registry @window level.
The CustomElementRegistry provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist.

Here we have two custom elements my-web-component but different versions are used in different extensions.

To Reproduce
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "my-web-component" has already been used with this registry.
The problem is that CustomElementRegistry is a global window object

window.customElements.define('my-web-component', MyWebComponent);

Expected behavior
Whether single-spa can solve the basic problem of tag name conflict when multiple versions of the same custom elements are used in micro frontend UIs?

Regards
Basanth

[filoxo]

My initial inclination is that no, single-spa cannot help with this at all. single-spa is a client-side routing library. Custom Element Registry naming collisions is a problem inherent to Custom Elements and browser environments, and afaik Custom Elements do not have an unregister API. Maybe the information at WICG/webcomponents#716 and https://open-wc.org/docs/development/scoped-elements/ can be more helpful.

If CustomElements could be unregistered, it'd be implemented much the same was as single-spa-leaked-globals and would still have the limitation of allowing only a single instance of a component registered at a time.

[msbasanth]

Thanks for the quick reply and confirmation.