Skip to content
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.

Sign up for GitHub

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

Jump to bottom

custom properties from CSS v-bind are not re-added when inline style is patched #9821

Closed
DerZade opened this issue Dec 13, 2023 · 1 comment · Fixed by #9824
Closed

custom properties from CSS v-bind are not re-added when inline style is patched #9821

DerZade opened this issue Dec 13, 2023 · 1 comment · Fixed by #9824
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working 🔩 p2-edge-case

Comments

@DerZade
Copy link

DerZade commented Dec 13, 2023 •
edited

Vue version

3.3.11

Link to minimal reproduction

https://play.vuejs.org/#eNqNU1FP2zAQ/itWXlqkJlbhLUu7bgxNTBtMsL1FmtL4UgyObdlOKKr633e2S0k7hnBe7Lvv7rv77rJJPmmd9R0keVLY2nDtiAXX6XkpeauVcWRDDDRkSxqjWjJC6KiUpayVtI4wbqulAEZmHjRuKmHh5MOL/+vN5Zc/59fff/+4ukXMKboKGmmQAB8OWi0qB/gieArG+3jzJ7fuScCsTPY0H8lIKy4dmBR6kM7mRCoJI5KTTjJouARWJjHDLmVI24nBK1gEP7L4Mz0C0X9Qr8edvhlX0D19QbHBcC+WnXNKkkUteP0w7HFGnOmgTOYGDGBTpqARi3EFHQgWvyKIRGytNDC0doJsPAHmQ+BTTlaGM9SdhEv6HJ/WSnStRAENaKjcuE+XXLLxcGInEzJtjJ/nNszNE82TSRIXI20rnd1bJXF1AmO5c9gyyWMN3oYL499lcuectjmlNZMYxkDw3mQSHJW6pQuEUdNJx1tImWoXZ9lZNp2iXNYN7RnYNl0a9WjBZNoohqnKZDIgo+jpcT+idmDeS34UdlDAke+gCM/v6VGiLWrjcBCy4asjZWrVai7AXGvH8c84UKgSQj1+CzY/+X0z9R3UD6/Y7+06NvXTQKhsIICrzApcdF/cXsEa73tnq1gndtP4j/MGLO6FrzHCPuNvhWUPcKHayzBoLle/7MXagbTPTYXV9WoEfBjI+Rutv5SLcu9V3P4FTeh3DA==

Steps to reproduce

Click "rerender" button

What is expected?

The custom property of v-bind remains on the div element (the ul has two columns) when the component is re-rendered.

What is actually happening?

When the component is re-rendered, the custom property of v-bind is not added to the div element again (the ul has only one column).

System Info

No response

Any additional comments?

No response
@DerZade DerZade changed the title style attributes from CSS v-bind are not re-added after parent is patched custom property from CSS v-bind are not re-added after inline style is patched Dec 13, 2023
@DerZade DerZade changed the title custom property from CSS v-bind are not re-added after inline style is patched custom properties from CSS v-bind are not re-added when inline style is patched Dec 13, 2023
@edison1105 edison1105 added 🐞 bug Something isn't working has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case labels Dec 13, 2023
@edison1105
Copy link
Member

a workaround

  <button @click="disabled = !disabled">rerender </button>
  <span v-if="disabled"></span>   //👈🏻 add an empty node so that the comp's childList changes when disabled toggled
</template>

@Alfred-Skyblue Alfred-Skyblue mentioned this issue Dec 13, 2023
Merged
yyx990803 pushed a commit that referenced this issue Dec 15, 2023
@Alfred-Skyblue
fix(sfc/cssVars): fix loss of CSS v-bind variables when setting inlin…
0a387df 
…e style with string value (#9824)

close #9821
@github-actions github-actions bot locked and limited conversation to collaborators Dec 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working 🔩 p2-edge-case
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(useCssVars): fix the loss of CSS variables during updates Alfred-Skyblue/vue-core
2 participants
@edison1105 @DerZade