bug: missing root element's scope id as classname in nested child

[yigityuce]

Prerequisites

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

Stencil Version

4.17.1

Current Behavior

think about having a component structure like below:

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


my-popover (can be used as standalone)

given that component structure I have a style for popover (eg.: padding: 8;) and I want to customize popover style from the timepicker component's style file like:

:host {
  my-menu {
     my-popover {
        padding: 32px;
     }
  }
}

Current behavior: nested element selector is NOT working since during the scss compilation phase it adds .sc-my-timepicker class to the my-popover selector and the compiled CSS file becomes sth like this:

.sc-my-timepicker-h my-menu.sc-my-timepicker my-popover.sc-my-timepicker {
  padding: 32px;
}

the problem is root component's scope id (sc-my-timepicker) is NOT being added to the nested component's classNames. So the selector which is defined in root component is NOT working.

Expected Behavior

works as expected

current:

expected:

System Info

Your current version of Node is v16.18.0, however Stencil's recommendation is v18.16.0 or greater. Note that future versions of Stencil will eventually remove support for older Node versions and an Active LTS version is recommended (https://nodejs.org/en/about/releases/).


      System: node 16.18.0
    Platform: darwin (23.4.0)
   CPU Model: Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz (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: 1713902307
     Stencil: 4.17.1 🚒
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.30.3

Steps to Reproduce

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

[christian-bromann]

Thanks for raising this well described bug and providing a reproducible example. I took a look and reviewed the PR.

[yigityuce]

@christian-bromann PR is updated

[yigityuce]

closing the issue since #5704 is merged 🚀 thanks all!

[rwaskiewicz]

The fix for this PR was included in today's v4.18.0 release