Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
ryuran opened this issue Jul 2, 2024 · 1 comment
Open
3 tasks done

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

ryuran opened this issue Jul 2, 2024 · 1 comment
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil

Comments

@ryuran
Copy link

ryuran commented Jul 2, 2024

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

@ionitron-bot ionitron-bot bot added the triage label Jul 2, 2024
@christian-bromann christian-bromann added Bug: Validated This PR or Issue is verified to be a bug within Stencil and removed triage labels Jul 4, 2024
@christian-bromann
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil
Projects
None yet
Development

No branches or pull requests

2 participants