Some style properties are lost on Native federation application

[kasar-NTT]

Detailed description

Describe in detail the issue you're having.
Issue on setting up the @carbon/styles on a native federation micro frontend. While developing the MFE application as a standalone, everything works as expected. But when it's time to fetch my MFE from a host application then some style properties are lost

Is this a feature request (new component, new icon), a bug, or a general issue?
Bug

Is this issue related to a specific component?
No

What did you expect to happen? What happened instead? What would you like to see changed?
I would expect the MFE application to work as expected both as a standalone or hosted inside another application

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?
"@carbon/styles": "^1.57.0",
"carbon-components-angular": "^5.25.1",

Additional information

• Screenshots or code
  As seen in the below screenshot, the button with a download icon is broken.
  On the right side, you can see that the: --cds-layout-size-height-local among with others are undefined
  

Also, it mentions that it inherits the styles from app-root, instead of the @carbon related styles

While working on the MFE as a standalone, everything works as expected:

and the properties are inherited correctly:

[Akshat55]

@kasar-NTT, styles are isolated in shadow-root and majority of the styles cannot be inherited from the root. This includes css variables, hence the undefined. I see that the root is open, have you passed in a styles sheet that imports carbon styles?

The following mdn docs may be useful to adding style to the shadow root:

• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets

[kasar-NTT]

@Akshat55 you are right, in my MFE application i have set the encapsulation to ShadowDom.
I have imported to the styles.scss the: @import "@carbon/styles/scss/components/button" and also in my specific component that is visible in the screenshot as well. I tried also with: @import "@carbon/styles and adding the fonts path that is required for that kind of import, but no luck

[Akshat55]

Have you tried setting the theme in the html for the MFE? Carbon v5 makes use of css variables and you can set these variables by importing the theme in the root as following:

carbon-components-angular/.storybook/preview.scss

Line 6 in 51098fe

@include styles.theme(styles.$white);

[kasar-NTT]

I will try that and come back for feedback! Thanks @Akshat55

[kasar-NTT]

Update,

the only to manage having the styles available on my components is by importing the required scss of the carbon component i want to use.

For example if i need to use the carbon dropdown i need to import into my-component.scss ->
@import "@carbon/styles/scss/components/dropdown/index";

This is the way i manage to get the required styles

[Akshat55]

Thank you for updating the issue and posting your solution!

It's odd that you would have to import individual component styling. I'm not 100% sure if this is possible, but can't you just create a global stylesheet with the following code in your assets directory and inject it into shadow root?

    // general stylesheet to inject
    @use '@carbon/styles';
    body { // Body or component tag?
     @include styles.theme(styles.$white); 
    }

[kasar-NTT]

When adding the @carbon/styles it requires to have the fonts locally.
Is this normal?