style: shorthand missing reactivity in prod mode

[tivac]

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

[dummdidumm]

My guess is that we need to enhance the following condition to also bail when a style attribute is used:

svelte/src/compiler/compile/render_dom/wrappers/Element/index.ts

Line 225 in 0eee98a

this.parent.cannot_use_innerhtml(); // need to use add_location

[Conduitry]

This should be fixed in 3.46.5 - https://svelte.dev/repl/3f698e2bd883418d9561b44277df585c?version=3.46.5