Svelte does not recognize popover types/properties inside template

[minht11]

Describe the bug

Try to use popover and observe that no types are incorrect even though typescript lib.dom.d.ts has definitions for it.

<div popover />

Try to add popover property and observe that its value is set as attribute instead of property.

<button popoverTargetElement={popoverElement} />

Reproduction

Reproduction

<script>
	let target = $state();
	let popover = $state()

	const workaround = (node) => {
		node.popoverTargetElement = popover
	}
</script>

<button
	bind:this={target}
	popoverTargetElement={target}
>
	Open
</button>

<button
	bind:this={target}
	use:workaround
>
	Open workaround
</button>

<div bind:this={popover} popover>
	Popup
</div>

Logs

No response

System Info

"svelte": "5.0.0-next.26"

Severity

annoyance

[navorite]

Try to add popover property and observe that its value is set as attribute instead of property.

<button popoverTargetElement={popoverElement} />

Maybe I don't understand what you're trying to say but I don't see the issue in this. You are assigning it as an attribute, how do you want it to be otherwise?

[minht11]

I want popoverTargetElement to be set as property, I assume svelte handle that for other dom elements? Haven't looked into it, or is it expected behavior that svelte always only sets attributes on native dom elements? If that is the case maybe I should open different feature request to allow set properties declaritively.

[navorite]

I want popoverTargetElement to be set as property, I assume svelte handle that for other dom elements? Haven't looked into it, or is it expected behavior that svelte always only sets attributes on native dom elements? If that is the case maybe I should open different feature request to allow set properties declaritively.

You have got things mixed up. HTML element attributes do not work the same way as a component prop. These are separate. When you assign an attribute over a DOM element, it is assigned as an attribute. If you want to assign it as a property, you need to get the element instance on the script and assign it from there. You shouldn't mix and match between these.

[minht11]

In SolidJS for example there is prop:value={} 'prop' namespace, which allows you to set property explicitely instead of attribute. Other frameworks do special cast some properties (like classList) so you can set them as props. Anyway, thanks for clearing it up that there is no way to do that in Svelte declaritively as of now.

[navorite]

In SolidJS for example there is prop:value={} 'prop' namespace, which allows you to set property explicitely instead of attribute. Other frameworks do special cast some properties (like classList) so you can set them as props. Anyway, thanks for clearing it up that there is no way to do that in Svelte declaritively as of now.

If you want to read/set a specific prop of a DOM element, you can use bind:propName. Otherwise, you're setting an attribute.