Completion for custom element tag name

[break-stuff]

Description

There doesn't seem to way to extend the language tool for custom elements.

Proposed solution

Vue and JSX templates have an interface that can be extended to include custom elements/web components. This would be a nice way for library authors to provide better type integration and descriptions within svelte templates.

Alternatives

No response

Additional Information, eg. Screenshots

No response

[jasonlyu123]

There are ways to enhance the typing.

https://svelte.dev/docs/typescript#enhancing-built-in-dom-types

[break-stuff]

Oh, this is fantastic! Thank you!

[break-stuff]

@jasonlyu123 do you have a working example of this? It doesn't seem to work in my sample app.

[dummdidumm]

Can you provide a link to that example app?

[break-stuff]

Yeah, here's a simple repo.

https://github.com/break-stuff/svelte-custom-elements-demo

[break-stuff]

I have added a additional-svelte-typings.d.ts to the /src directory and updated the tsconfig.json to "include": ["src/**/*"] (basically just followed the steps in the docs).

[jasonlyu123]

It does work in your repo. Are you expecting to have completion for it as well?

[break-stuff]

Yes, I don't see any difference in having it vs not having it in my repo.

[jasonlyu123]

The difference is it will be type-check for the element.

[jasonlyu123]

There is another way to add custom tag name completion. It's only a local config, so it's not something library authors can leverage, but it's still a good workaround until we can figure out a way to provide the completion.

https://github.com/microsoft/vscode-html-languageservice/blob/main/docs/customData.md

[break-stuff]

Yeah, I created a package to generate that, but it would be nice if devs would only have to set one thing for types and autocomplete.

https://www.npmjs.com/package/custom-element-vs-code-integration