bug: nested to ::slotted in scoped component #5879
Description
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.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.0Steps 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