To avoid conflict in micro frontend design(multiple UI5 instances), suggest not to operate on document, window, body and so on

[JackieWei]

Feature Request Description

In each UI5 version, some part of code will do operation directly on document, window, head or body, like, use tree walker directly to document, create portal on body, because we are more and more involving in micro front-end design, that means there will be many UI5 web component with different versions working on the same DOM and BOM, so there will be potential risk if we operate on the same target. And a micro front-end should not impact another micro front-end. This also may happen on CSS variables.

So I suggest we use some virtual concept, instead of document, window, head, body, like, provide a function call setRootElement, user can set the root element to UI5, and UI5 will consider this paramter as the root of this UI5 application top level element, also head, body can be the same

For css variables, I suggest if we can add suffix to css variables, like --_ui5_checkbox_compact_focus_position_v0018, then we can completely avoid the conflict of different versions.

Proposed Solution

As above. For document, head, body, window, use some functions like setRootElement, setGlobalHead, setGlobalBody, setGlobalWindow to let user to set customize top level element or vars instead of directly using the raw ones

For css vars, add suffix to completely avoid confliction.

Proposed Alternatives

No

Additional Context

No

Priority

• [x] Medium

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: SAP CIC
• Bussiness impact: We are using micro front-end design, which will have many different versions of UI5 Wcr working in one page, isolated by Proxy and ShadowDOM, so those potential conflict can be risk to our developers and cause random bugs.

[JackieWei]

Like the portalContainer property in AnalyticalTable, it will give a option for user to define own container or global target

[ilhan007]

Hello @JackieWei since UI5 Web Components version 1.17.0 with this change we started to prefix and scope all CSS variables to the ui5 web components version in use.

For example: In the code we have --_ui5_avatar_fontsize_XS, but at runtime it becomes --_ui5-v2-0-1_avatar_fontsize_XS in case @ui5/[email protected] is used.

• [x] CSS vars no longer class when multiple ui5 web components version are used side by side.

For the other cases described, we would like to get real-world scenario before adding more functionality to the framework. If you work on something and you face issues, please share them with us.

BR, ilhan