【custom-element】wrong props casting when rendering async custom elements in SFC

[baiwusanyu-c]

Vue version

latest

Link to minimal reproduction

https://play.vuejs.org/#eNqNVG1v2jAQ/iuWNSlBCuHD9om+SF3VStuHrdr6rUEqSw5I69iR7VAQyn/fnU0SQ1lZhBRz99zLc74nO35T1+m6AT7llybXZW2vM1lWtdKW7dgqYRoWrGULrSoWIS4KvPdK9a50slAqfTHozxtjVXUnoAJpTVrAopQQR9V2DGL8VtrVOF+VohgbuxVgxnOzlXmUULZRJmHjkmPQvBFYJJNs/xiwTR2PAgtjuZLGMgsby66o0ziyYOzjJsJMA0pjpJZhLnooKrS0w582Gc4aZAF6yuLcbhI2T9ifhH1yvYzY1fVh0n2hVRwV5RopHVVU8laU+SvmcqE+S7rvPspXc7mk+QYtJewJk52b3FEZxtwU7mXUVaIxKQGpUEs/oWgUMAxicHLTsK93KA8yZtrhDd14iGhHs9AQXAQOGH+Xk37NeMKtwd4W5RI3R0ncQUcl47mq6lKA/lnbEnvP+LQjmfG5EOrtu7NZ3cC+RYxZQf56wv5iNmTL+IMGA3oNGe99dq6XYL377vcP2ojBWamiEYj+wPkLcK4N9ehhXxtZYNsBznX7zSmmlMtHc7exIE1HiholpF+4jKPAbj+gPrT7Of3i4nCkOEUvPRxfL00vuttQiQmp2dtvaHGokJLo6DTsymf8ItO9DL2+SOdXp1LGBGUnk8Z+83Ye0UvjAQuVBlK8CiXWEPd+xmqtatyrp255k34lZ8mA8quPsGeUGBLNlVCoTg3FBWufD5Due+Gy4kejN/uPRqcG7x68eBH92SufdD8aeJyUOekUYSgZ6jeZnUzY7q0tag8Pk4lPiu+z1AnzP8Qd7pg2Gf/Jmpy+RTq9Y4zGIcUZ2p71QcKW3sEwePsXCXwAHw==

Steps to reproduce

1. Open the playground link
2. You can see that the playground is completely blank.
3. In foo.js, comment out defineAsyncComponent and click the refresh button.
4. The props are rendered to the page, and the correct props values ​​are printed in the setup function.

What is expected?

Whether it is a custom element that is asynchronous or not, props behavior should be consistent

What is actually happening?

Async custom element props are incorrectly parsed as DOM attributes.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 2.89 GB / 15.73 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.12.1 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.4355

Any additional comments?

• Repo snap
  

• We can use the prop modifier to force conversion to DOM property to circumvent the problem

<script>
import { h, ref } from 'vue'
import { Foo } from './foo.js'
customElements.define('my-el-with-child-styles-async', Foo)
export default {
        setup(){
          const text = ref('testTx')
          return {
            text
          }
        },
        render: (ctx, a, b, $setup) => {
          return h('div', {
            onClick: () => $setup.text = 'change'
          }, [h('my-el-with-child-styles-async', {
              '.testFn': () => console.log('test'),
              '.testTx': $setup.text,
              testTxss: 'testTxss'
            })]
          )
        }
}
</script>

[yyx990803]

closed via a07e7bf