Invalid HTML with `TransitionGroup name="list" tag="ul"`

[codeflorist]

Vue version

3.5.13

Link to minimal reproduction

https://vuejs.org/guide/built-ins/transition-group

Steps to reproduce

The error is visible, if the docs-page for TransitionGroups (https://vuejs.org/guide/built-ins/transition-group) is put through the W3C validator:

Attribute name not allowed on element [ul](https://html.spec.whatwg.org/multipage/#the-ul-element) at this point

What is expected?

Valid HTML

What is actually happening?

Invalid HTML

System Info

Any additional comments?

No response

[Justineo]

Vue’s component template code isn’t strictly compatible with HTML, but the rendered output is. So, validating the template with the W3C validator wouldn’t be meaningful.

[codeflorist]

@Justineo

Of course i didn't validate the template, but the actual HTML.

If you look at the source code of https://vuejs.org/guide/built-ins/transition-group, you will see this actual HTML code:

<ul name="list" style="margin-top:20px;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

That's invalid HTML and that's also why W3C validator is seeing this as an error.

IMHO a frontend framework should never produce invalid HTML code in the browser.

[Justineo]

You’re right, I initially thought you were referring to the source code. I compared the output of Vue 2, and the name attribute in Vue 3 does indeed seem redundant.

[edison1105]

It's weird. It is only reproducible in the HTML of the online documentation.
I can't reproduce it in Playground. I tried running the docs repository locally but couldn’t reproduce it either. The TransitionGroup props include the name, which theoretically should not appear in the generated HTML output.

Edit:
It can be reproduced when SSR is enabled. Playground