Vue compiler emits DUPLICATE_ATTRIBUTE error instead of ignoring duplicates

[Archangel603]

Version

3.2.20

Reproduction link

codesandbox.io

Steps to reproduce

run node src/index.js in terminal

What is expected?

According to HTML5 spec
https://html.spec.whatwg.org/multipage/parsing.html#parse-error-duplicate-attribute
parser should ignore all duplicates

What is actually happening?

Parser throws SyntaxError("Duplicate attribute.")

---

This problem doesn't affect work in browser or SSR with @vue/server-renderer, only prints warning. However, in vite-plugin-ssr this error causes render to fail. I understand that duplicated attributes is something abnormal but in some cases (vuejs/vue#10837) they can occur.

[yyx990803]

The Vue 2 issue you linked to seems to be a bug in Vue 2's scoped ID handling, can you replicate the behavior in Vue 3?

Even if the same issue can be reproduced in Vue 3, it should be fixed as a scoped ID bug. There should still be no duplicated attributes and IMO it's better to warn the user instead of silently ignoring it. Alignment with HTML5 isn't a goal here since technically HTML5 will silently allow anything.

[Archangel603]

I do have the mentioned Vue 2 bug in Vue 3.0.0 project and it is related to scope ids since switching style from scoped to module solves the problem. Will try to create minimal repro with latest Vue version later this week. If succeeded, should I open separate issue or just put the link to repro here?

I agree that user should be warned about any issues but duplicated attributes with equal (or both missing) values is not really a severe problem. Moreover, duplicated attributes are removed automatically as we can see in the resulting html string in repro. So this syntax error is not actually a some fatal error which would lead to unexpected behavior of the resulting html.
At the same time, say I miss > in

<div data-f345fg data-f345fg
        Hello World
</div>

As with duplicated attrs, it will result in SyntaxError but now we will have meaningless render result
<div data-f345fg hello world < div></div>
So we have two errors being absolutely different in terms of possible impact on code behavior but equal in theirs interpretation by compiler's users since you can't distinct one error from another. Consequently, with server-renderer in production, with Vite, etc, render will fail no matter the error severity.

[yyx990803]

should I open separate issue or just put the link to repro here?

Please comment here with updated repo.

Re duplicated attributes: again, if the compiler mistakenly injects the same scopeID twice, it's a scope ID bug. If you manually author duplicated attributes in a template, it is always a mistake (because there is no legit reason to have duplicated attributes) and it should result in a compile error.

The fix here should be preventing the compiler from injecting the same scopeID attribute twice, not making duplicated attributes a soft warning.

[yyx990803]

Closing as stale. If you can provide proper reproduction, please open a new issue.