feat: CustomElements Name Scoping

[mayerraphael]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

With the rise of micro frontends and partial apps (Module Federation, Angular Elements or other any other kind of islotion), a solution is needed to handle multiple versions of the same component library in one application.

Currently providing the same library with different versions in the same app (via Module Federation, some other Angular Elements app or any other way) will result in one version overriding the others' CustomElementRegistry entries. The latest one calling defineCustomElements() wins.

It would be helpful if defineCustomElements('suffix') could be used to append a custom suffix to each and every component.

<my-component /> would be become <my-component-suffix /> in that application/module. If it is included into another frontend app, those components would not clash with the ones already registered at the CustomElementRegistry.

Describe the Use Case

Being able to use different versions of the same component library (or more specifically, of the same named custom elements) without one overriding the other.

Describe Preferred Solution

Allowing for a custom suffix when calling defineCustomElements() so the suffix is appended to every component when the components are registered at the window CustomElementRegistry.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[rwaskiewicz]

Hey @mayerraphael 👋

This is something the team has on its radar and something we definitely want to consider as we look towards the future of Stencil. There are a few different avenues we're considering when it comes to having multiple versions of the same web component, handling naming collisions between different web components, etc.

This appears to have the same ask as https://github.com/ionic-team/stencil/issues/3138. Although the title of the issue is 'feat: component versioning', the primary ask in that issue is:

It should be possible to set a suffix to the component names that are registered via customElements.define to be better hardened when 2 custom elements are "living" on the same page in different versions with the same name.

which I believe is what you're proposing here. This may also be related to https://github.com/ionic-team/stencil/issues/2957, although that issue doesn't explicitly propose using a suffix.

Since we have a few tickets related to this functionality, I'm going to close this one in favor of #3138 to try to consolidate the tickets.

Thanks again!