Skip to content

SvelteHTMLElements type causes errors when used with generics #16839

@HighFunctioningSociopathSH

Description

Describe the bug

I have dealt with this issue for a long time now, and just found out the issue happens only when using SvelteHTMLElements type.

Reproduction

Let's say we have the following simple component

<script lang="ts" generics="ElementTag extends keyof HTMLElementTagNameMap">
  import type { SvelteHTMLElements } from "svelte/elements";

  type Props = SvelteHTMLElements[ElementTag] & {
    element: ElementTag;
  };
  const { element, ...restProps }: Props = $props();
</script>

First of all, the component error says "Type '{}' is not assignable to type 'Props | undefined'" instead of "Property 'element' is missing in type '{}' but required in type '{ element: keyof HTMLElementTagNameMap; }'"
The language server seems to handle only this small type; If it becomes any more complicated, especially if the main "SvelteHTMLElements[ElementTag]" is wrapped in other Typescript utility types such as "Omit", like below =>

<script lang="ts" generics="ElementTag extends keyof HTMLElementTagNameMap">
  import type { SvelteHTMLElements } from "svelte/elements";

  type Props = Omit<SvelteHTMLElements[ElementTag], "children"> & {
    element: ElementTag;
  };
  const { element, ...restProps }: Props = $props();
</script>

Then you get hit with "Expression produces a union type that is too complex to represent.ts(2590)" everywhere, especially where you render the component (Make sure to restart Svelte language server after you make changes, because if you don't, the language server takes a while to show the error).
Since I knew keyof SvelteHTMLElements doesn't work because the type contains [name: string]: { [name: string]: any }; at the end of it, I thought maybe this is the cause of it so I extracted the properties from "SvelteHTMLElements" that doesn't include the Svelte's own elements such as "svelte:boundary" and the last [name: string]: { [name: string]: any }; and used that instead, but the errors didn't go away.
Now, why did I say "SvelteHTMLElements" is causing this? Because if I swap it out with HTMLAttributes, the problem goes away =>

<script lang="ts" generics="ElementTag extends keyof HTMLElementTagNameMap">
  import type { HTMLAttributes } from "svelte/elements";

  type Props = Omit<HTMLAttributes<HTMLElementTagNameMap[ElementTag], "children"> & {
    element: ElementTag;
  };
  const { element, ...restProps }: Props = $props();
</script>

But if I use "HTMLAttributes" instead, I lose the extra properties that are element-specific and exist inside "SvelteHTMLElements".
Can someone please confirm that I'm not the only one running into this issue? I'm using the latest VSCode extension, and my TS version is "^5.9.2"

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 6.42 GB / 15.63 GB
  Binaries:
    Node: 24.6.0 - C:\nvm4w\nodejs\node.EXE
    npm: 11.5.1 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (139.0.3405.125)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    svelte: ^5.39.4 => 5.39.4

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions