Create scoped custom elements for micro-frontend authors

[vladitasev]

When creating front-end services that may end up in any app and unforeseen integration scenarios, developers might have reasons to stick with a specific version of UI5 Web Components.

If an app is running UI5 Web Components v1.0 (and has already upgraded all custom elements such as ui5-button, ui5-list, etc...) and then the app loads a service, written for UI5 Web Components v1.5, some new features will be unavailable (due to tags already having been upgraded by the 1.0 code). Thus, the service should have the flexibility to use namespaced tags to ensure its code is always loaded and no other code will have upgraded its tags.

Requirement: introduce a scoping build step for internal and third-party UI5 Web Components packages that automatically creates imports for versioned tags.

Examples (for version rc9):
@ui5/webcomponents/dist/Button.js -> ui5-button;
but
@ui5/webcomponents/dist/scoped/Button.js -> ui5-button-100rc9;

and then when creating your service, you have the option to use the versioned tags, if needed:

<ui5-button-100rc9>Hello world</ui5-button-100rc9>

Naturally, when using the scoped tags, services would need to also change their HTML when updating the version:

<ui5-button-100rc10>Hello world</ui5-button-100rc10>
or
<ui5-button-100>Hello world</ui5-button-100>

When determining the suffix, the version is stripped from . and - to make it CSS-friendly:

ui5-button-1.0.0-r.c.8 { width: 100px; }

for example is invalid while

ui5-button-100rc8 { width: 100px; }

is fine.