New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unexpected behaviour when a
tag is given a username
or password
attribute
#10498
Comments
In Vue 3, the default way to add an element property/attribute is through the DOM property - if it exists. i.e.: const el = document.createElement('div')
// setting an id happens through the DOM property, because 'id in el' => true
// so Vue does this:
el.id = 'my-id'
// if the property does not exist (and in a few special cases), we set as an attribute instead:
el.setAttribute('custom-attribute', 'my-value') Now, how does this relate to the reported issue? So in a way, this behavior is unsurprising, assuming one was aware of these special properties (I wasn't as of 5 minutes ago) and Vue's default for setting properties. It has an easy workaround/fix: force setting these as attributes with Now we just have to discuss if this needs to be handled as another special case in
|
Vue version
3.4.21
Link to minimal reproduction
https://play.vuejs.org/#eNp9kctOwzAQRX8leE0T8VhFoRJUXYDEQ8DSEnLTaeLW8Rh73FRU/XfGqVq6QN2N771jnxlvxb1z+TqCKEUVaq8dZQEourG0VbEXuOQDQeeMIuBTllUqaz0s7qRoiVwoi6Lv+7xBbAzkNXZSZDGAt6oDziwQZ8qz5lQIPfo5azP1w0LADkZILfiRIvJ6Fik1fMeNFOOJ0fUqe4aLqlADzgmCuBQUarQL3eTLgJbxtwlMCn7daQP+1ZFGG6Qos8FJnjIG+6dBIx/h8qDXLdSrf/RlYI6SizcPPM4apDh6pHwDtLenHy+w4fpodjiPhtNnzHcIaGJi3Mceop0z9kluoH3sHHrStvkM0w2BDYehEmhK7oa8FPyHkzOj/+He5LdDn7Q73uLXGny6kxfIRn59JXa/+CuwQQ==
Steps to reproduce
a
tag in the DOMWhat is expected?
The
username
andpassword
attributes fall-through to the underlyinga
element in the DOM like in vanilla-HTML.Here's an example fiddle showcasing what I was expected: https://codepen.io/Ross-Alexandra/pen/VwNagGR. If you inspect the
a
here, you'll see theusername
,password
, andsome-other-attribute
attributes directly in the DOM.What is actually happening?
The
username
&password
attributes are being consumed, and prepended to thehref
as the authentication-part of the URL (ex:<a href="https://foobar:[email protected]">
is being rendered instead of<a href="https://www.google.com" username="foobar" password="baz">
).System Info
No response
Any additional comments?
I ran into this during a migration from Vue 2.7 to Vue 3.1. At some point when our codebase was still on Vue 2.x, we made a refactor which caused one of our components to no longer accept a
username
prop. This refactor wasn't properly completed however, as some of the references to that component were still passed ausername
. The root of that component is ana
tag, so theusername
prop being passed to the component fell through to an attribute on the underlyinga
tag. This bug was then encountered, as that username attribute was prepended onto thehref
.If this is working as intended, I was unable to find any documentation pointing this out.
The text was updated successfully, but these errors were encountered: