<component> tag render problem #9107
Description
Vue version
3.3.4
Link to minimal reproduction
https://codepen.io/l-x-f/pen/ExGyXMr
Steps to reproduce
<html lang="en">
<head>
<!-- element-plus styles -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- vue3 -->
<script src="//unpkg.com/vue@3"></script>
<!--element-plus -->
<script src="//unpkg.com/element-plus"></script>
<title>test</title>
<style>
.list .item {
display: flex;
align-items: center;
}
.list span {
margin-right: 20px;
}
</style>
</head>
<body>
<div id="app">
<ul class="list">
<li class="item">
<span style="color: red">Component1</span>
<!-- not render -->
<component :is="Component1"></component>
</li>
<li class="item">
<span>Component2</span>
<component :is="Component2"></component>
</li>
</ul>
<ul class="list">
<li class="item">
<span>Component3</span>
<component :is="Component3"></component>
</li>
<li class="item">
<span>Component4</span>
<component :is="Component4"></component>
</li>
</ul>
<ul class="list">
<li class="item">
<span>Component5</span>
<component :is="Component5"></component>
</li>
<li class="item">
<span>Component6</span>
<component :is="Component6"></component>
</li>
</ul>
<ul class="list">
<li class="item">
<span>Component7</span>
<component :is="Component7"></component>
</li>
<li class="item">
<span>Component8</span>
<component :is="Component8"></component>
</li>
</ul>
</div>
<script>
const { h, createApp } = Vue
const item = {
label: 'click',
type: '0'
}
const App = {
setup() {
const Component1 = h('h1', { style: { color: 'green' } }, () => item?.label)
const Component2 = h(ElementPlus.ElButton, { type: 'primary' }, () => item?.label)
const Component3 = h('h1', { style: { color: 'green' } }, item?.label)
const Component4 = h(ElementPlus.ElButton, { type: 'primary' }, item?.label)
const Component5 = h(
'h1',
{ style: { color: 'green' } },
{
default: () => item?.label
}
)
const Component6 = h(
ElementPlus.ElButton,
{ type: 'primary' },
{ default: () => item?.label }
)
const Component7 = h('h1', { style: { color: 'green' } }, [item?.label])
const Component8 = h(ElementPlus.ElButton, { type: 'primary' }, [item?.label])
return {
Component1,
Component2,
Component3,
Component4,
Component5,
Component6,
Component7,
Component8
}
}
}
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
</script>
</body>
</html>What is expected?
Expected 'Component1' to render the text 'click'
What is actually happening?
But I didn't get any rendering results.
System Info
System:
OS: Windows 10 10.0.22000
CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
Memory: 5.21 GB / 15.75 GB
Binaries:
Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.6.6 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (116.0.1938.69)
Internet Explorer: 11.0.22000.120
npmPackages:
vue: ^3.3.4 => 3.3.4Any additional comments?
No response