ionic-team
bug: missing root element's scope id as classname in nested child
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.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
Thanks for raising this well described bug and providing a reproducible example. I took a look and reviewed the PR.
