[solid-js/html] template assigns values to wrong element properties

[trusktr]

Describe the bug

The html template tag assigns value to the wrong JS properties on HTML elements in some situations.

Your Example Website or App

https://playground.solidjs.com/anonymous/541373a7-092d-4556-b8c7-3ff93caa268e

Steps to Reproduce the Bug or Issue

1. visit that minimal playground reproduction
2. observe the error in console Expected x to be a finite number. Received: false
3. this error is thrown from Lume when it runtime-type-checks values being assigned to some properties like size
4. the error is happening because the value for visible=${() => false} is being assigned to the element's size property
5. modify visible=${() => false} to visible=${() => true} and we'll will see the error message change to Expected x to be a finite number. Received: false
6. if we pause where the error is thrown, and look at the callstack, we will see _fn2. Click on that.
7. In there we will see it is setting _$el1.size from exprs[2] which when we hover shows the expression from visible=${() => true}:
8. when we delete the line <${Foo}></${Foo}> the problem goes away

Expected behavior

The expressions should be mapped to the correct JS properties

Screenshots or Videos

No response

Platform

n/a

Additional context

It seems that the component interpolation throws off the property tracking somehow.

import 'https://jspm.dev/[email protected]'
import html from 'https://jspm.dev/[email protected]/html'

function Foo() {}

document.body.append(html`
	<${Foo}></${Foo}> <----------- THIS LINE

	<lume-element3d
		visible=${() => false}
		size=${() => (
			console.log('size value 2'),
			[100, 100]
		)}
	></lume-element3d>
`)