[Bug]: Layout broken in shadow DOM because some tokens are only set in :root

[kubijo]

Package

@carbon/react

Browser

No response

Package version

@carbon/react@npm:1.72.0

React version

react@npm:18.3.1

Description

When my React app is compiled and mounted in a shadow-DOM with styles mounted inside the shadow root (for obvious reasons) a lot of layouting is broken due to missing tokens.

I've tracked it down to this snippet that does the trick

// Carbon does this for `:root`, but not `:host`
// and it screws our layout in shadow DOM
:host {
    @include layout.emit-layout-tokens;
}

There was and still is more stuff to handle, like…

• making Portal-ed elements mount inside shadow root
• I still have issues with dropdowns (possibly Item click inside FilterableMultiSelect not working in shadow DOM #17747)

…but I felt like this warrants a report since I found out the solution, and it could maybe tight into something you have already going on.

Reproduction/example

Not easily done, but the report describes the root cause and solution

Steps to reproduce

Ditto… repro rather involved, but the solution is to widen any :root scoped selector to include :host too

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems