rendered dom lose `scroll` prop

[zhangenming]

Vue version

lastest

Link to minimal reproduction

https://play.vuejs.org/#eNp9UU1LAzEQ/StjLqtQu/hxKtuCSkE9qKjgJZeynW5Ts0lIJrWw7H93ktraQ+kpmffePN5jOnHn3HAdUYxEFWqvHEFAim4ijWqd9QQdeFxADwtvWyhYWkgjTW1NIGhDA+PEnxePqLWFL+v1/Ky4kKYqt3ZsxANh6/SMkCeAank16bq83PdVyVNGlXGRYH3Z2jnqsRTMSwHsYrX+e65LllblgZsYCAocZqGa4SpYwz265CZFbVunNPpXR4rDSjGCzCRuxll/njNGPuJgh9dLrL+P4KuwSZgUbx4D+jVKsedo5hukLT39eMEN//ckd4ma1SfIdwxWx5RxK7uPZs6xD3Q57VO+hjLNZ5huCE3YlUpBk7LPein4Qg8nqv/HvRne5j1petH/ApvArKU=

Steps to reproduce

What is expected?

scroll exist

What is actually happening?

scroll lost

System Info

Any additional comments?

No response

[zhangenming]

i use scroll as a tailwind css prop

[LinusBorg]

Vue allows you to set both HTML attributes and Element properties through the template. By default, it check is an element has a property of the same name, and if yes, it sets the value from the template as the element property, not as an HTML attribute. If there's no element property of that name, it sets it as an attribute

Now, scroll is a property/method on Elements:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll

So possible solutions:

A) use a different name that does not conflict with a known HTML element property
B) Force Vue to set it as an attribute:

<input scroll.attr />