missing type of HTMLAttribute

[charlyoleg2]

Describe the bug

The following code works but svelte-check generates an error:
1- The error message
Error: Object literal may only specify known properties, and '"onmouseover"' does not exist in type 'HTMLProps<"img", HTMLAttributes>'. (ts)
style="width: 9em; display: inline-block; transition: transform 0.5s;"
onmouseover="this.style.transform = 'scale(1.25)'"
onmouseout="this.style.transform = 'scale(1.0)'"
2- The svelte code:
Attributes of the HTML tag img:
src="{base}/favicon.svg"
style="width: 9em; display: inline-block; transition: transform 0.5s;"
onmouseover="this.style.transform = 'scale(1.25)'"
onmouseout="this.style.transform = 'scale(1.0)'"
alt="Parametrix logo"

Reproduction

https://svelte.dev/repl/da7835978d2f4fad99f4172d529391bd?version=4.2.17

In this repl, I have replace the tag img with div for simplifying the code

Logs

> paramui@0.5.9 lint
> prettier --check . && eslint .

Checking formatting...
All matched files use Prettier code style!

> paramui@0.5.9 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /home/charles/Bis/Project/CardanCo/Parametrix/parametrix_vag/repos/parametrix/pkg/paramui
Getting Svelte diagnostics...

/home/charles/Bis/Project/CardanCo/Parametrix/parametrix_vag/repos/parametrix/pkg/paramui/src/routes/docs/prez/+page.svelte:14:5
Error: Object literal may only specify known properties, and '"onmouseover"' does not exist in type 'HTMLProps<"img", HTMLAttributes<any>>'. (ts)
				style="width: 9em; display: inline-block; transition: transform 0.5s;"
				onmouseover="this.style.transform = 'scale(1.25)'"
				onmouseout="this.style.transform = 'scale(1.0)'"


====================================
svelte-check found 1 error and 0 warnings in 1 file
npm error Lifecycle script `check` failed with error:
npm error code 1
npm error path /home/charles/Bis/Project/CardanCo/Parametrix/parametrix_vag/repos/parametrix/pkg/paramui
npm error workspace paramui@0.5.9
npm error location /home/charles/Bis/Project/CardanCo/Parametrix/parametrix_vag/repos/parametrix/pkg/paramui
npm error command failed
npm error command sh -c svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
ERROR: "check" exited with 1.
npm error Lifecycle script `ci2` failed with error:
npm error code 1
npm error path /home/charles/Bis/Project/CardanCo/Parametrix/parametrix_vag/repos/parametrix/pkg/paramui
npm error workspace paramui@0.5.9
npm error location /home/charles/Bis/Project/CardanCo/Parametrix/parametrix_vag/repos/parametrix/pkg/paramui
npm error command failed
npm error command sh -c run-s build lint check test:unit:once

System Info

npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: Linux 6.8 Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat)
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
    Memory: 28.34 GB / 30.80 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.13.1 - /usr/bin/node
    npm: 10.8.0 - /usr/bin/npm

Severity

annoyance

[jrmoynihan]

If you're trying to alter a single style programmatically in Svelte 4, I'd recommend style directives.

<script lang="ts">
  let scale = 1.0
  
  function scale_up(){
    scale = 1.5
  }
  function reset_scale(){
    scale = 1.0
  }
</script>

<img
  style="width: 2em; height: 2em; background-color: red; display: inline-block; transition: scale 0.5s;"
  style:scale
  on:mouseover={scale_up}
  on:mouseout={reset_scale}
  alt="Parametrix logo"
/>

This also ties into the error you're seeing. In Svelte 4, the on: syntax (note the colon) is used for element directives, including attaching callbacks to event listeners. In Svelte 5, you would use the onmouseover attribute itself (without the colon).

[charlyoleg2]

Thank you James for your quick response!
I'd like avoiding using a variable because i want to clone those HTMLElement later on.
Here the code that will clone those slides : https://github.com/charlyoleg2/parametrix/blob/main/pkg/paramui/src/lib/Carousel.svelte
Here the result: https://charlyoleg2.github.io/parametrix/docs/prez
Click on one of the slides to start the presentation.
Because of the cloneNode(), I want to have all the HTML of a slide self-contained.

[jrmoynihan]

This might not be a great fit between what you're using (a lot of imperative DOM manipulation) and Svelte (a declarative framework by design).

I'm pretty sure you can do everything in that library with Svelte, and write it more expressively, with less code to type.

Have you already gone through the Svelte tutorial? A lot of the stuff can be achieved with bindings, actions, and declarative markup.

[dummdidumm]

Using the event attribute and passing a string is highly discouraged. In Svelte 5, event attributes will error when being passed a string. As pointed out by others I suggest to solve this differently through the mechanics Svelte offers. Therefore closing as "wontfix"