CSS 中的 v-bind() 与 render一起使用 报错

[tthzwq]

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-vgk1dw?file=src%2FApp.vue&terminal=dev

Steps to reproduce

Playground中无法复现，复制以下代码到App.vue

<script setup>
import { createVNode, render } from 'vue';

const theme = { color: 'pink' };

const vnode = createVNode('div', {}, ['World']);

render(vnode, document.createElement('div'));
</script>

<template>
  <h1 class="main">Hello</h1>
</template>

<style scoped>
.main {
  background-color: v-bind('theme.color');
}
</style>

控制台报错

What is expected?

期望v-bind() 与 render 一起使用能正常工作

What is actually happening?

删除.main的样式，就能正常工作了

System Info

System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M2 Pro
    Memory: 44.34 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.local/state/fnm_multishells/7092_1719794257039/bin/node
    npm: 10.2.4 - ~/.local/state/fnm_multishells/7092_1719794257039/bin/npm
    pnpm: 8.15.4 - ~/.local/state/fnm_multishells/7092_1719794257039/bin/pnpm
    bun: 1.1.17 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 126.0.6478.127

Any additional comments?

No response

[skirtles-code]

This seems to be reproducible in the Playground using 3.4.21 and PROD:

• Playground (3.4.21)

But it looks like it was fixed in 3.4.22. Not sure which change fixed it, but #8523 seems likely.

There also seems to be an unrelated issue in DEV mode, with the imported render function clashing names with the component's own render function:

• Playground

[edison1105]

@skirtles-code I think we should open a new issue to track the render function clashing names problem due to the related problem has been fixed via #8523