feat: Allow use of ElementInternals with Web Components

[tronicboy1]

First time contributing! Please excuse me if I'm doing something wrong.

Problem

You cannot add ElementInternals to a Svelte Web Component because we cannot add the static property formAssociated in the constructor.

Solution

I added an option to the <svelte:options> tag to add the formAssociated property to a Web Component's construction.
I also added a function to attach the internals to the component and then return them for use.

<svelte:options tag="wc-svelte-select-demo" elementInternals />

<script>
    import { createCustomElementInternals } from 'svelte/internal';

    const _internals = createCustomElementInternals();
    let value = 'a';
    $: value, _internals.setFormValue(value);
</script>

<select id="demo" bind:value>
    <option value="a">A</option>
    <option value="b">B</option>
</select>

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

• Run the tests with npm test and lint the project with npm run lint

[vercel]

@tronicboy1 is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[dummdidumm]

Thank you! I'm wondering if #4534 is a more general solution to this, implementing the $$host and then accessing all methods on it you want. That said, I'm not sure how/when $$host lands.

[tronicboy1]

Thank you! I'm wondering if #4534 is a more general solution to this, implementing the $$host and then accessing all methods on it you want. That said, I'm not sure how/when $$host lands.

@dummdidumm

Thanks for the reply and review!

If my understanding is correct, $$host is a reference to the actual custom element instance (this) yes?

If that is the case then unfortunately we could not use that as a solution. The reason why is that accessing an instance would be after the constructor (class Wc extends HTMLElement) is registered to the component registery.

The static property for ElementInternals needs to be set before being registered with customElements.define.

[dummdidumm]

The static property yes, but not attachInternals which could go through $$host if I'm not mistaken

[tronicboy1]

@dummdidumm
Oh! Yes the .attachInternals method should be accessible on the $$host variable.

Are you suggesting that we drop the helper function in this or and just have users do something like const internals = $$host.attachInternals()?

[dummdidumm]

Are you suggesting that we drop the helper function in this or and just have users do something like const internals = $$host.attachInternals()?

Yes that's my thinking - though I wouldn't want you to change this now. The whole web component story is in the middle of a rework now, and $$host is something we need to have a deeper thought about after Svelte 4. So this likely won't land soon (neither $$host nor your PR).

[tronicboy1]

Are you suggesting that we drop the helper function in this or and just have users do something like const internals = $$host.attachInternals()?

Yes that's my thinking - though I wouldn't want you to change this now. The whole web component story is in the middle of a rework now, and $$host is something we need to have a deeper thought about after Svelte 4. So this likely won't land soon (neither $$host nor your PR).

@dummdidumm
Understood! I will leave it as is for now; let me know if you think we can do away with it.

I am really happy that we may be able to include this in version 4!! 🥰 Let me know if there is anything I can help with.