Scoping: conflicting CSS vars for rc.14 and rc.15

[MarcusNotheis]

Bug Description

We have our main application running with UI5 Web Components rc.15, and a micro front-end that is loaded at runtime with UI5 Web Components rc.14. Whenever the micro frontend is loaded, it injects a new style tag in the document head (data-ui5-theme-properties="@ui5/webcomponents"). This causes several CSS variables of the rc.15 version to be undefined, e.g. var(--_ui5_popup_default_header_height), so the Dialog and Popover headers are now broken.

Expected Behavior

I would expected that a scoped rc.14 micro frontend does not break the main application with rc.15.

Steps to Reproduce

1. Open this codesandbox
2. The Header of the Dialog looks good
3. Click the button to load the rc.14 micro frontend
4. The header is now broken

Isolated Example

https://codesandbox.io/s/eager-wave-fn71t?file=/src/App.js

Context

• UI5 Web Components version: 1.0.0-rc.15 (main), rc.14 for the micro frontend
• OS/Platform: MacOS
• Browser: Chrome

Priority

• [ ] Low
• [ ] Medium
• [X] High
• [ ] Very High

Stakeholder Info (if applicable)

• Organization: SAP Value Advisory / UI5 Web Components for React
• Business impact: We can't update our apps to 1.0.0-rc.15

Maybe this can be solved with https://github.com/SAP/ui5-webcomponents/pull/2367? At least I would expect that none of the css variables is removed, so maybe just add a version suffix to the data-ui5-theme-properties style tags?

[MarcusNotheis]

Additional Info: this is the source file of the micro frontend in this example:

import '@ui5/webcomponents/dist/Button';

import { setCustomElementsScopingSuffix } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';

setCustomElementsScopingSuffix('rc14');
console.log('Button from @ui5/[email protected] registered!');

Build with rollup in a pretty standard config:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';

export default [
  {
    input: 'index.js',
    output: {
      name: 'rc14Bundle',
      format: 'iife',
      file: 'bundle.js',
    },
    plugins: [resolve(), commonjs(), json()],
  },
];

[schempil]

Hi colleagues, Is there some progress or a status update on that topic? This is also affecting us 😢

[ilhan007]

Hello @schempil there is a PR in review: https://github.com/SAP/ui5-webcomponents/pull/5586 so we expect to have a solution soon.

[MarcusNotheis]

Will most likely be fixed by #6876