Custom elements with {shadowRoot: false} not initialised in correct order

[palasjir]

Vue version

3.5.3

Link to minimal reproduction

https://play.vuejs.org/#eNqtU01vm0AQ/SubvWBLBmTcXlxiqbGsKpX6obS9IVUIxjbJsoN2F9uVxX/vfmAgjuNccmNm3pt9b3l7pJ+rKtjVQOc0lpkoKrVIeFFWKBQ5khzWBYdlLRWWKwYlcEUashZYEk+TvE8ddollNV1COwtCWwcZmN1nsOgMFg1gCc+Qy3Ydub0kYNQeNSFHuU1z3D8gqjlZp0xCM9Y7+g3RlQ1axasb9I4hXgZuycgr//mZOd2bOIX2uKvQqIVGBhqH3RXrQkFZsVSBrgiJb3yf3P35MidqW0iSI0juKbJH8UR830FOp9uqr6O21p282C3uNflEvYlD02rx4TNCV5p9cThQQydUSX2L62ITPErkOhtHw0iogRcMxI9KFfqWEzondmJmKWO4/2p7StQwOfWzLWRPF/qP8mB6Cf0pQILYQUK7mUrFBpQbr359h4P+7oYl5jXT6CvDB5DIaqPRwe5qnmvZA5xVe29DWfDNb7k6KODyZMoINcjG4hOq02l+4mvWe7mz4IPlJbzRtzhMd//AiARVV8Nnhvwb1lxBfv64XJiRQcBwM/Jcpi3dG5tpRxyNxuR24RRdoJQO5ZkQNpZ5LYqDyEiGioRtXlz/PCrDl/5eJqdvmnzpctq7dCbfz+LfHQiTDW1vFnwMZrT5D2pywKI=

Steps to reproduce

1. Create and define two custom components with {shadowRoot: false} and and onMounted
2. Use one component inside each other:

  <my-comp1>
    <my-comp2>
      <div>I'm not shown</div>
    </my-comp2>
  </my-comp1>

What is expected?

setup script and onMounted callback is called for components in hierarchical order:

1. my-comp1
2. my-comp2

<div>I'm not shown</div> visible in dom.

When shadowRoot is set to true setup and onMounted callback are called in the correct order.

What is actually happening?

setup script and onMounted callback is called for components in following order:

1. my-comp2
2. my-comp1

<div>I'm not shown</div> not visible in dom.

This deviates from standard lifecycle of vue components.

System Info

No response

Any additional comments?

No response

[edison1105]

1. Playground with shadowRoot false child component mount first, but different in v3.4
2. Playground with shadowRoot true parent component mount first
3. Playground normal component child component mount first

• The mounted hooks order of 1 and 3 is as expected. 2 is incorrect.
• the setup order of 1 is incorrect

Edit:
I've made some tweaks on PR #11861 to fix (1) via

After #11861 is merged, the behavior of (1) will be consistent with (2), which I believe is the expected behavior. see playground

[palasjir]

Ok (1) and (3) might be ok with the order of mount. I probably had a false perception how this works. But (1) still seems incorrect to me how setup is called. Like this It's for example not possible to use provide/inject properly.

Also I have found that setup and onMounted is called even when component is not rendered eg.

<!-- Comp 1 -->

<template>
  <div v-if="false">
      <slot />
   </div>
</template>

Reproduced in playground here this all seems to be related

Maybe i fundamentally missunderstand something about usage of web components but his feels to be quite wrong.