vNode API exposed over 'firstChild' through v-for directive

[dimitri-grablow]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNq1Vdtu00AQ/ZXRCsmtaB0gbyauBFWR4AEQQbxgpFr2JNnW3l32kiaK/O/Mrp3ENEkbipqXrOdy5sxlZ1fsnVLx3CFL2MgUmit7kYlM4EJJbaHESe4qC6tMAIi8xgQii8ZGZ15Q5jZP4OQU0ovWAkCjdVqsvwAKqZaX0gmbwDD4+J90VjmSRFErad76/yboa2+MJYF2GIUUxnoX1D8+SA0plLJwNQob/3aol2OssLBSn0RxMDov+fz8jtvZ+UTq6DRAA9gZN15PceFlCtGuaQJZJqL95td2qRDkBIoZr0qN4uerX8ANvFhteMU9VRw4a+dpxb5qDUFfPwI94drYSw9yH3mr+SfgMWIonqwQKD/ijsUtF1O4m+W2DQdtvLywLq+qJQXu4XW+cSWnJ9Hcl6jHkZp3tm1Kj+KBgl/fA+46Oua1InpH9dQE2yM62hr+Rz9bVs/T0Q77iT3dD23IC3LTzyY5nAukadqvfo9LP/T6SvrLORr0VsPIIrnlFukLYEQVD4f2CEWVG5NmbPeCZayzI0sFYaDITgAX2y2RMUhucenldFxjcSEIS/UAAK4q9POSwGoFApom8A3YA7XmM3iUWzsqfzPbjQrdmNJUtjFf96Ic6/PmCT7DQ9kojReUeDcZTUNmJAn96MxGg02b2BmzhqZswqfxjZGCVn3YrRkrZK14hfqLspymMGNUzq77jBaCvPsUZDSd2C1v8vFrZI/8xiy8LGNfNRrUc6rqRmdzPUVqrldfjT/jgs4bZS1L53vwgPIb0iZynmNr9t6Jkmj37ALbj7V/tGjFfTdXC4vCrJPyRLdPTMbovbt8IPUt3WE8DH50DVjzB5LmZhY=

Steps to reproduce

Run the reproduction from the link and see the output and the console.

What is expected?

firstChild is a property of an HTML node and should return the same as children[0].
This is working like that in vue2 and in vanilla JS.

What is actually happening?

in vue 3 firstChild from v-for is not returning the first html node child, but likely an internal virtual node object.

System Info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 128.28 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/.volta/tools/image/node/16.18.1/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.19.2 - ~/.volta/tools/image/node/16.18.1/bin/npm
  Browsers:
    Chrome: 118.0.5993.88
    Firefox: 118.0.2
    Safari: 16.5
  npmPackages:
    vue: 3.3.4 => 3.3.4

Any additional comments?

No response

[LinusBorg]

The counterpart to children[0] would be firstElementChild, not firstChild - see firest info box on this page: https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild

Yes, Vue uses text Nodes as markers in some places, like here. You only care about the elements, so use APIs that only return elements.

[dimitri-grablow]

I do not agree with this argumentation, although I understand , that the alternative solution might solve my problem.

I do not understand, why the dom tree gets additional text nodes, if I don't create them in the code explicitly? It otherwise has to be stated explicitly in the vue2 -> vue3 migration guide, because such changes in behaviour break the existing functionality for the projects that migrate.