Empty text nodes around template tag

[ZhenyaUsenko]

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNp9kc1OwzAQhF/F8qWXklIKlyogAeoBDoCAoyUUJZvg4tiWf0KkKu/O2mkaolb1aT3feD1r7+i91knjga5p6qDWInNwxyQhacGbWGA5ANJclMrczjjhkiwvZ3s+dfASDSPad8rGlS7G1kgXk2uPhME9kXFrc8O1Ixac1xH3ApZ0Tp3NlSx5lWytkjjaLnRiNFe15gLMq3ZcScvomkQSWCaE+n2OmjMe5oOef0P+c0Lf2jZojL4ZsGAaYPTAXGYqcD3efLxAi/UB1qrwAt1n4DtYJXzI2NsevCww9j9fTPtUa2Ucl9Wn3bQOpB2GCkGDs4t+RvF/H8+MPsZdJdfxHJMdvuJXAyb0xAdcJTfJ8op2f18fsvM=

Steps to reproduce

Use document.querySelector("#app > div").childNodes in console

What is expected?

NodeList length should be 10

What is actually happening?

NodeList length is 32

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 126.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.12.3 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.92
    Safari: 18.0.1

Any additional comments?

Vue creates redundant empty text nodes around template (fragment)

• changing compilerOptions.whitespace does NOT help
• removing new lines around and inside template does NOT help
• removing template tags and using v-for on the div element DOES fix the issue

[edison1105]

That's Fragment's start and end anchor. Can using document.querySelector("#app > div").children solve your problem?

[ZhenyaUsenko]

I don't necessarily have a problem with that, thought those were not intentional

Can the anchors be omitted for single element fragments? It seems they are pretty common (e.g. v-for + v-if)

[edison1105]

Can the anchors be omitted for single element fragments? It seems they are pretty common (e.g. v-for + v-if)

No, this is intentionally designed to be this way.