bug: intermediate parents' scope ids are not reflected to the children elements

[yigityuce]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.18.1

Current Behavior

as you already know #5702 and #5749 issue fixes are already merged & shipped with v4.18.1.

One last time (I hope) we need to update this logic. I found out we don't add the intermediate components' scope ids to the children elements. Think about having a component structure like below:

my-timepicker -------> my-input ---------> input (native)
             |
             | ------> my-menu --------> my-popover ---------> my-list-item --------> whatever

given that component structure I have these style files:

// FILE: my-list-item.scss
:host {
  text-transform: none;
}

// FILE: my-menu.scss
:host {
  my-list-item {
    font-weight: 800;
  }
}

// FILE: my-timepicker.scss
:host {
  my-menu {
    my-list-item {
      text-transform: uppercase;
      color: red;
    }
  }
}

and as a result of compilation I want to have all of those styles for the my-list-item component which is used within the timepicker:

font-weight: 800; // from menu - MISSING - intermediate style
text-transform: uppercase; // from timepicker - OK
color: red; // from timepicker - OK

the problem is only the root component's scope id (sc-my-timepicker) is added to the child component. But all the parent components' scope ids must be added. Otherwise, when you use it in another parent, the styles get broken since it only receives the most parent components scope id.

P.S: I reused the existing reproduction repo by updating it. Here you can find the updates.

Expected Behavior

System Info

System: node 18.20.2
    Platform: darwin (23.4.0)
   CPU Model: Apple M3 Pro (12 cpus)
    Compiler: /Users/yigit.yuce/Documents/Projects/personal/yigityuce.github/stencil-v4-sc-nested-css-scope-id/node_modules/@stencil/core/compiler/stencil.js
       Build: 1715629646
     Stencil: 4.18.1 🏍
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.0

Steps to Reproduce

Reproduction repo: https://github.com/yigityuce/stencil-v4-sc-nested-css-scope-id

Code Reproduction URL

https://github.com/yigityuce/stencil-v4-sc-nested-css-scope-id

Additional Information

No response

[yigityuce]

since it has been merged, this issue is resolved and I'm closing it. Thanks everyone for their supports 🚀

[yigityuce]

hey @christian-bromann please don't take it as a push but do you know when will be the next version released?

[christian-bromann]

It should be this week.