Allow web components to bind to the parent form

[chrisolsen]

Describe the problem

I am compiling the svelte components to web components and for some form components I need to be able to call the attachInternals() method on the HTMLElement instance to obtain a reference to later call the setFormValue method. Along with this there is a formAssociated static property that needs to be able to be set to true.

Describe the proposed solution

Have an additional option made available in the <svelte:options formAssociated={true} /> that would allow the formAssociated static prop to be set and would allow a reference to the HTMLElement be accessed allowing access to the attachInternals() method.

Alternatives considered

Without this feature generated web components can't be used to their full extent.

Importance

would make my life easier

[chumager]

Hi, you can extend the custom element if you set option tag={null}.
to access internals from svelte you need to export the internals;

<script>
import {onMount} from "svelte";
export let internals;
onMount(()=>{
  console.log("internals", internals);
});
</script>
<!-- your html-->

import component from "./component.svelte";
class newComponent extends component {
  static formAssociated = true;
  constructor(){
    super();
    this.internals = this.attachIternals();
  }
}
customElement.define("my-component", newComponent);

[baseballyama]

I close this issue because there is an easy workaround that chumager explained.

[ethanlookpotts]

Hi, you can extend the custom element if you set option tag={null}. to access internals from svelte you need to export the internals;

<script>
import {onMount} from "svelte";
export let internals;
onMount(()=>{
  console.log("internals", internals);
});
</script>
<!-- your html-->

import component from "./component.svelte";
class newComponent extends component {
  static formAssociated = true;
  constructor(){
    super();
    this.internals = this.attachIternals();
  }
}
customElement.define("my-component", newComponent);

This also works in Svelte 4! Simply extend component.element instead:

import component from "./component.svelte";
class newComponent extends component.element { // <- component.element instead of component
  static formAssociated = true;
  constructor(){
    super();
    this.internals = this.attachIternals();
  }
}
customElement.define("my-component", newComponent);