You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Function call in class: and style: directives are inconsistent with standard attributes.
color={func()} will be re-trigerred only if a reactive state is updated. style:color={func()} will also be re-trigerred when any of the other style: directive is updated
Describe the bug
Function call in
class:andstyle:directives are inconsistent with standard attributes.color={func()}will be re-trigerred only if a reactive state is updated.style:color={func()}will also be re-trigerred when any of the otherstyle:directive is updatedReproduction
In this example we use an function to generate a random color, ans a state to change the size of the text (using the obsolete
<font>only in order to have a visual result).Updating the size of the text do no re-trigger the function :
https://svelte.dev/playground/hello-world?version=5.56.4#H4sIAAAAAAAACm2QQW_bMAyF_wrHDbC82U67dRngOQGGAcMuPfU476DYjCNApQyJTrsZ_u-D7BQLCuskfHwkH9-IrB8JS_xJ1jp4ct62oKg1Qm2KGR6NpYDlrxHlTx91EWD20vWt74twJiuRHXSgNd44FmIJWGIVGm962ddccy3HgRsxjqEjJq-FvjvrvEphjNVaGsdBoIkQdpC8TeADqHstp8Jrbt2jSuE93Dz_mF9aiHsQb7hTt9u06HX7INqLSm6SDLZpEaxpSOXb9Ov_4c5SYV2nanzloMZs2fui9iSD54XNaFpOsCQQzF-CHbwLooVUcpdcmrjaXJ0bVSVUgSw1AgfDbXnWdqDdGCtT1Ejl-pjH_rbaXH7X9OMq_bRK71bp51W6XaVfrmi1WWzPh1StOS_KN3kOQzDcgYbq6Fj2IA4CEciJoDlp7gjyfBHH-pLfbnyV9jRHeB1ELYFE4uTLfBFvDoNQmGdt5mXR1-IFMxR6FizFDzT9zlC0sU-GWyyP2gaa_gGZOj6-5wIAAA
In this exemple, we do the same thing using
style:directive, and updating and changing the size restarts the generateColor() function :https://svelte.dev/playground/hello-world?version=5.56.4#H4sIAAAAAAAACnWQQY_TMBCF_8poQIqzZNMWlh5CWgkhIS6c9kg4eONpseSOI3uS3SXKf0dOu6KsiA-W_L33bL8ZkfWJsMJv5JyHRx-cAUXGCpkcCzxYRxGrHyPKc5d8CWDxkvrcdWUcyEliDzrS_3jrWYglYoV1bIPtZN9ww40cem7FeoYjMQUt9MU7H1QOY1IbaT1HgTZB2EH2JoN3oL5r-VUGzcafVA43sH76Oq-8FH8vwfJRbbZ52WlzLzqIytZZAdu8jM62pG63-ae_l3tHpfNH1eCrHzRYnN99cQeSPvCZzWg6V3AkEO1vgh28jaKFVLahU3aJcb26Kpx8FdSRHLUCD5ZNNWjX025MypQ8UvsuTWS_Lj_SqV5dTtfKZokvJt4v8cXEhwV-9w-vV-cqc7na2AGiPDuq5iHtxlcjnS7qwbPcpsLXtRuJJGL5CH1M-2wFYwO1YgdKbxk77BvGAoWeBCsJPU0_CxRt3aNlg9VBu0jTH1Mj-xDRAgAA
It's event worse with async function, since this can lead to an await_reactivity_loss :
https://svelte.dev/playground/hello-world?version=5.56.4#H4sIAAAAAAAACnWRQW_bMAyF_wqhDbDcuU7SdTl4ToBhQLHLTj3OPagSkwlQKEOinaaG__sgJ8WyYtZBgD6-J-pRgyB1QFGJH-ich6MPzoBEYxlNLgqxsw6jqH4Ngk9t0iUgijfXt7YtY4-OE3tWEf_HtSdG4igqUUcdbMvbhhpqWMUTadh1pNl6gj0SBsX43TsfZA5D0jSsPUUGnSBsIPuQwSeQPxX_LoMi4w8yhxtYvjxMKy_ZP3KwtJerdV62yjyyCiyzZVbAOi-jsxrl7Tr_-vdy77B0fi8b8e4FjSjOfd_UAbkLdGYTGs9BHDJE-4qwgY-RFaPMVnjILjaqF1exk66COqJDzfBsyVS9ch1uhlQZk4Zr36aJbJflFzzUi8vpurKa47OOuzk-6_g8w-__4fXiHGUKVxvbQ-STw2oa0mZQR2X5_deOF83OE9-m2NfhG47IbGkPXUz7JAVjA2q2PaaOxvbbhkQhGF9YVBw6HJ8Kwcq6oyUjqp1yEcc_DOdqbd0CAAA
We can see that the same problem can occurs on the
class:directives :https://svelte.dev/playground/hello-world?version=5.56.4#H4sIAAAAAAAACm1QQY7bMAz8CkH04ACpswXai-oE2FsvfUFdFJLFaIlVKEOis7sN_PdCttPuoRcBGs4Mh3NDsRdCg98oxgQvKUcPDXlW8jvc45kjFTQ_bqhvY-VVAPd31eM4tuVKUSvmbKH_4UMSJdGCBrsyZB711EsvvZ4nGZSTAJdfmXyzg1uFex2SlBSpjSk0Pd6nPe6-rvNMOmWB71af2mzFp0uzgxM8tF8WwrzaR1JwHOAIH4papeZsY6HNQ7rDuyxdtI7iqWMZJ4V66rHH4YmGZ5deewTH4s3yJ3-8OQ7zSVMIkeqC7rCqFyPPVxiiLcXkSr1nnzfQcdj06yWFVFkCTKW-VjWzm5RKzef5unoWfYu0CKr71tHF5sBi4BNd4GHrZbTes4QF_NuEtpn8XeXs8BxymsQbyOTfkWpTG-mcRD8W_k0GPv8z6g5rDtyj0qui0TzR_HOPajm-sHg0S8HzH9vPU1xUAgAA
Logs
System Info
Severity
annoyance