iX custom properties can not be set within a Shadow DOM (selector: `:root .<theme-class>`)

What happened?

When an iX component is loaded as a micro-frontend (aka remote) in a Shadow DOM within a non-iX container web app, iX's css custom properties can't be set by the iX-based micro-frontend. Therefore, the styling of the iX micro-frontend is broken!

A deep investigation of the issue brought to light the following findings:

Even simple ix-button colors are missing. This is due to undefined custom properties such as --theme-btn-primary--background (theme custom properties are defined as global css variables, e.g. in ix-brand-theme.css with the following selector :root .theme-brand-light; note that iX css files such as ix-brand-theme.css are imported by the micro-frontend).
The problem is that within a Shadow DOM the :root selector is not available (only :host), cf. https://stackoverflow.com/questions/73680718/use-root-in-shadow-dom.
Work-around: manually define or copy+paste custom properties and define them with a selector :host .theme-brand-light within the micro-frontend css definitions.

Therefore I suggest that iX provides a css file that defines custom properties in such a way that they can be used by micro-frontends in a Shadow DOM within a non-iX app. The selector for the custom properties could be extended, e.g.: :root .<theme-class> -> :root .<theme-class>, :host <.theme-class>. Alternatively a separate css file could be provided for micro-frontends, using :host instead of :root as main selector.

What type of frontend frameware are you seeing the problem on?

Angular, Others

Which version of iX do you use?

v2.0.4

Code to produce this issue.

Internal code repo:

mfe-blueprint

Fixed brand-theme (internal code repo): mfe-blueprint/-/blob/main/projects/mfe3/src/app/tariffs/ix-brand-theme.fixed.scss

Please contact me for more details or internal link to the repo.

siemens / ix