Web Components: Recursive use of components not supported

[m-mohr]

Version

4.5.10

Reproduction link

https://github.com/m-mohr/vue-recursive-web-components-repro

Environment info

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 14.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 87.0.4280.141
    Edge: Spartan (44.19041.423.0), Chromium (87.0.664.75)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.0
    @vue/babel-plugin-jsx:  1.0.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.10
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.10
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.10
    @vue/cli-plugin-router:  4.5.10
    @vue/cli-plugin-vuex:  4.5.10
    @vue/cli-service: ~4.5.0 => 4.5.10
    @vue/cli-shared-utils:  4.5.10
    @vue/component-compiler-utils:  3.2.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.2.0
    vue: ^2.6.11 => 2.6.12
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.6 (16.1.2)
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Run npm run build and open the file dist/demo.html -> It shows the incorrect behavior:

World
Bye Bye

(it seems sometimes it also shows "Hello" instead of "World")

Run npm run serve and open the browser -> It shows the correct behavior:

Hello World
Bye Bye

What is expected?

I expect that recursive use of components also works in web components, see "steps to reproduce" for details.

What is actually happening?

The component used recursively is only shown once. Including other components (QuitWorld) works though.

[m-mohr]

Workaround, for now, is to register the web component name as a normal component and use the web component name in the templates. See commit Open-EO/openeo-vue-components@9617cef for two examples.