Style scoped is not working without template

[road2coder]

Vue version

3.4.37

Link to minimal reproduction

https://play.vuejs.org/#eNqNVF1v0zAU/SsXv6ST2pRpE0ilnQRoEvCwTQPBA0HIS27bDMc2/ug6VfnvXNtNmkFBvLTxPeee+2nv2Gut841HNmNzW5paO7DovL4oZN1oZRzswOASWlga1UBG1KyH3qpG7+35NByCEsGFLJW0Dhq7gkVwH2XvUAgFX5QR1bPspJDzaYpGcejgsNGCO6QTwHx9CqXg1i4Kxjkv2MVuF6Xadj5dnyZOLbV3sJk0qkJBRMILBtMExrzC93w6UKajdY8CwZZKY0WWnORhF1xKJZSZUarVq0K2Mb1AJQ4bM0cOclmv8nurJDUqehSspCi1QHOtXU3lFmyWtALGqdqHD9HmjMdxZy/XWP44Yr+322Ar2I1Bi2aDBesxx80KXYIvP17hlr57kOr3gtj/AG/RKuFDjon2xsuK0h7wYrbv40xrufpkL7cOpe2KCokGZhv5BaMZhwb/rfRDumf5efSjjlIXu/04bNpwx0IzvcNqDOunq4bbyKhwyb0gZlDURmnbh/zplcNbJZAs4B41/V/55g7NuPOawfN99gBY1e4/yek3XodRDHnShUzrXculov3uUh+NTmBx0VEABDraY0uMTEnxONnU+EAFHUBH0wroNaHweYjWS0gR8744WCwWcNpnELNI4kSsJpHX+0OvfUOgL8OUerAFFBYHMbqWHBMvuZwE/Ij05dBMQ04fhtplZJiosOPE3WMtXfth+wS/Q0FC61FmNZfZODrRvZ/B16yk92LCvVuTOfQ533DhMSfRbzSXoSmEIOVB7DSHKN/t35MH549noA+WGnCnTIVmYnhVe0rmXG/pUaCt41VF14P2Wm/hRTT+/lJ836AJ94Z2nJY/P3vJ2l8zmr64

Steps to reproduce

Create a sfc using setup to return a render function instead of using template. Vue will not generate a scoped id for the component.

What is expected?

Generate scoped id for the component

What is actually happening?

The component does not have a scoped id

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 Intel(R) Core(TM) i7-14650HX
    Memory: 2.06 GB / 31.71 GB
  Binaries:
    Node: 22.3.0 - E:\node\node.EXE
    npm: 10.8.1 - E:\node\npm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    pnpm: 9.4.0 - E:\node\pnpm.CMD
    npm: 10.8.1 - E:\node\npm.CMD
    pnpm: 9.4.0 - E:\node\pnpm.CMD
    pnpm: 9.4.0 - E:\node\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vue: ^3.4.37

Any additional comments?

No response

[edison1105]

a workaround

const label = ()=> h('span', { class: ['cell-auth', info.value.cls] }, info.value.text)
return () => label()

or

return () => h('span', { class: ['cell-auth', info.value.cls] }, info.value.text)

[road2coder]

a workaround

const label = ()=> h('span', { class: ['cell-auth', info.value.cls] }, info.value.text)
return () => label()

or

return () => h('span', { class: ['cell-auth', info.value.cls] }, info.value.text)

It works, Thank You. This means I should create VNodes in the render function not the setup, right?

[edison1105]

@road2coder

It works, Thank You. This means I should create VNodes in the render function not the setup, right?

correct~
Or use useCssModule to apply class in setup