fix: ensure typings for <svelte:options> are picked up (Svelte 4)

[dummdidumm]

Fixes #12886

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 57e7983

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[madupuis90]

Sorry for commenting on a closed issue, but I am not sure where to post

I brought this change in my project and I am not sure where to define the types for Svelte to pick them up. I am using the solution proposed here (#3091 (comment)) to get a reference to the host but I am getting this typescript error: Error: Property 'host' does not exist on type '(Anonymous class)'. (ts) since this PR was merged in

I was not sure if it was worth it to open a new issue, the functionality in the comment linked above is not explicitly documented in the docs.

[dummdidumm]

I brought this change in my project ... but I am getting this typescript error

Do you mean "I didn't get this error before, but now I do"?

As for how to fix it: That's tricky because there's not really a way to use typescript in the template in Svelte 4. In Svelte 5 you could do this:

    extend: (customElementConstructor) => {
      return class extends customElementConstructor {
        host: HTMLElement;

        constructor() {
          super();
          this.host = this; // or this.shadowRoot, or whatever you need
        }
      };
    }
  }}

In Svelte 4 you could move your function that defines the extension into a separate file to type it properly there

<svelte:options
  customElement={{
    tag: 'custom-element',
    extend: extendClass
  }}
/>

<script>
  import { extendClass } from './another-file';
  export let host;
</script>

[madupuis90]

@dummdidumm yes that is what I meant. We use renovate to keep our Svelte custom elements up to date and we try to keep them up to date.

We are currently on Svelte 4 so I think the proper fix would be to do is something like your second example (although right now the code is exactly your Svelte 5 example but without host: HTMLElement). Our current band-aid solution is to @ignore that typescript error instead of pinning the Svelte dependency to 4.2.18. I think we will wait until we move the components to Svelte 5 before applying a proper fix to this.

Thanks for the reply