ionic-team
bug: nested to ::slotted in scoped component
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
input:
:host ::slotted(p) b {
color: blue;
}
:host ::slotted(p) b a {
color: yellow;
}
:host ::slotted(*) b {
color: blue;
}
:host ::slotted(*) b a {
color: yellow;
}
output:
.sc-test-demo-h.sc-test-demo-s>p b,
.sc-test-demo-h .sc-test-demo-s>p b {
color:blue
}
.sc-test-demo-h.sc-test-demo-s>p b,
.sc-test-demo-h.sc-test-demo-s>p b a,
.sc-test-demo-h .sc-test-demo-s>p b a {
color:yellow
}
.sc-test-demo-h .sc-test-demo-s b {
color:blue
}
.sc-test-demo-h .sc-test-demo-s b a {
color:yellow
}
The line .sc-test-demo-h.sc-test-demo-s>p b, in the second selector is not expected.
Expected Behavior
output:
.sc-test-demo-h.sc-test-demo-s>p b,
.sc-test-demo-h .sc-test-demo-s>p b {
color:blue
}
.sc-test-demo-h.sc-test-demo-s>p b a,
.sc-test-demo-h .sc-test-demo-s>p b a {
color:yellow
}
.sc-test-demo-h .sc-test-demo-s b {
color:blue
}
.sc-test-demo-h .sc-test-demo-s b a {
color:yellow
}
System Info
System: node 18.18.2
Platform: darwin (23.5.0)
CPU Model: Apple M1 Pro (10 cpus)
Compiler: /Users/yvainl/Work/dls-ignite/node_modules/@stencil/core/compiler/stencil.js
Build: 1716921701
Stencil: 4.18.3 😄
TypeScript: 5.4.5
Rollup: 2.56.3
Parse5: 7.1.2
jQuery: 4.0.0-pre
Terser: 5.31.0
Steps to Reproduce
Create a scoped component with this CSS
:host ::slotted(p) b {
color: blue;
}
:host ::slotted(p) b a {
color: yellow;
}
Code Reproduction URL
https://github.com/ryuran/stencil-bugs/tree/slotted-scopped-css-bug
Additional Information
I know it's not a valid use case because we should not set a css selector to select something in a slotted element. But as it was a working usecase before we should consider to fix this behavior
@ryuran thanks for raising the issue and providing a reproducible example. We have marked this as a bug. At this point I can't say when the team is able to look into this and recommend to provide assistance in resolving this issue. I am happy to answer any questions if possible. Thank you!
