Add ability to attach ElementInternals to Svelte Web Components

[tronicboy1]

Describe the problem

Currently, there is no way to add a static tag to Svelte Web Components.

This poses a problem when you are trying to make custom elements with form interoperability using ElementInternals.

This could easily be fixed by adding logic in the constructor template to add the static value and internals setup logic.

https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples

Describe the proposed solution

I propose adding a new setting to the <svelte:options /> tag; elementInternals="true".

We could then add the static field necessary and have a separate function for adding internals in the lifecycle hook.

Alternatives considered

I thought it would be possible to adjust the constructor of the element's class. This would not work as we cannot redefine custom elements.

Importance

i cannot use svelte without it

[dummdidumm]

You can now do this using the new extend option:

<svelte:options
  customElement={{
    tag: 'custom-element',
    extend: (customElementConstructor) => {
      // Extend the class so we can let it participate in HTML forms
      return class extends customElementConstructor {
        static formAssociated = true;

        constructor() {
          super();
          this.attachedInternals = this.attachInternals();
        }
      };
    }
  }}
/>

<script>
  export let attachedInternals;
  // ...
  function check() {
    attachedInternals.checkValidity();
  }
</script>

...