ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.41k stars 777 forks source link

bug: nested to ::slotted in scoped component #5879

Open ryuran opened 5 days ago

ryuran commented 5 days ago

Prerequisites

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

christian-bromann commented 3 days ago

@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!