Gissues: <component> tag render problem

l-x-f

Sep 1st 2023

Vue version

3.3.4

Link to minimal reproduction

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.4

Any additional comments?

No response

baiwusanyu-c

Sep 1st 2023

Judging from the examples given in the documentation, passing a function to the h function is usually used as a component's slot, while elements usually do not do this. In this case, I think it is a relatively marginal use case. Perhaps the documentation could be more descriptive.

Alfred-Skyblue

Sep 2nd 2023

The same problem exists when rendering Teleport component.

Playground