Skip to content

Type of bind:this on svg elements is HTMLElement #447

@sorig

Description

@sorig

Describe the bug
Creating a this binding on svg elements is not correctly typed.

To Reproduce

  1. Create a fresh typescript template project.

  2. Replace the content of App.svelte with:

<script lang="ts">
	let group : SVGElement;
</script>

<main>
	<svg>
		<g bind:this={group}></g>
	</svg>
</main>
  1. Run npm run validate. The following error is returned.
./svelte-typescript-app/src/App.svelte:7:17
Error: Argument of type 'SVGElement' is not assignable to parameter of type 'HTMLElement'.
  Type 'SVGElement' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 16 more. (ts)

Expected behavior
group should be of type SVGElement

System (please complete the following information):

  • OS: macOS
  • IDE: VSCode
  • Plugin/Package: "Svelte for VSCode", svelte-check

Metadata

Metadata

Assignees

No one assigned

    Labels

    FixedFixed in master branch. Pending production release.bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions