Describe the bug

The style:<prop> or style:<prop>={prop} shorthands can lose reactivity in prod mode in some cases. The particular use-case I'm seeing is a structure like this

<div> <div style:color /> </div>

where the inner <div> has no dynamic content, so in production mode the .innerHTML optimization is applied. This then generates a noop update function for the component.

Adding dynamic content to the inner <div> will disable the .innerHTML optimization and restore reactivity. Using the longhand style declaration like style="color: {color};" will also work around this issue.

Reproduction

https://svelte.dev/repl/3f698e2bd883418d9561b44277df585c?version=3.46.4

1. Swap to JS output tab
2. Look at p function in dev mode, see that reactivity exists
3. Set dev to false
4. Look at p function, it's now a noop

Important Note: the rendered output in the REPL seems to always use dev mode, so the result will look correct. You have to check the actual "JS output" tab to see the issue in the source.

Logs

No response

System Info

System: OS: Windows 10 10.0.19044 CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor Memory: 96.87 GB / 127.90 GB Browsers: Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.46) Internet Explorer: 11.0.19041.1566 npmPackages: svelte: ^3.44.0 => 3.46.4 vite: ^2.8.0 => 2.8.6 @sveltejs/vite-plugin-svelte: ^1.0.0-next.40 => 1.0.0-next.40

Severity

annoyance