[🐞] v2 Targeting id inside style tag or useStylesScoped$ not working on client side

[markovickosta]

Which component is affected?

Qwik Runtime

Describe the bug

On user navigation style is not loaded, page needs to be refreshed for style to show.
Expected: style is shown on user interaction without needing the page reload.

const id = useId();
return (
  <style dangerouslySetInnerHTML={`#${id} { background: red; }`} />
  <div id={id}>Test</div>
)

Reproduction

markovickosta/qwik-2-test#5

Steps to reproduce

Repro:

• Checkout branch km/dangerous-style-bug
• npm i
• Navigrate to any test route
• Style is not working until page is refreshed

System Info

System:
  OS: macOS 15.3.1
  CPU: (10) arm64 Apple M4
  Memory: 255.33 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.14.0 - /usr/local/bin/node
  npm: 11.1.0 - /usr/local/bin/npm
Browsers:
  Chrome: 133.0.6943.142
  Safari: 18.3
npmPackages:
  typescript: 5.4.5 => 5.4.5 
  vite: 5.2.1 => 5.2.1

Additional Information

No response

[Varixo]

The problem here is that generated id on client side is not valid CSS id selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors#valid_id_selectors
If it starts from - it should be escaped first.
Can you use

`[id='${id}'] { ...} `

instead?

[markovickosta]

@Varixo How can useId() start with - when it generates an uuid?

[Varixo]

@Varixo How can useId() start with - when it generates an uuid?

It is not uuid :D i think we can change it to not start from -, but we can not guarantee that it will not start from a number (and this is probably also not a correct selector)

Is it different from v1?

[wmertens]

@Varixo if it starts with a number we can add _ in front, no?

[Varixo]

@Varixo if it starts with a number we can add _ in front, no?

right, we can :D I will do that