Stencil version:

 @stencil/core@1.8.8

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Stencil component with a static formAssociated property does not behave like a vanilla customElement, accessing form related internals methods throws "DOMException: Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element." in chrome.

Expected behavior:

The static property formAssociated defined on a component should be attached to proxy class defining the customElement or at least Stencil could provide an idiomatic way to allow to attach static properties. It would be awesome to enventually provide a shim for unsuporting browser... but this may deserve it's own issue ;)

Steps to reproduce:

A click on the below component (when nested in a form) should submit the form and not throw an error on chrome.
Related code:

@Component({
  tag: 'associated-to-form',
  shadow: true
})
export class Test {
  static formAssociated: true;
  @Element()
  private host: HTMLElement;
  constructor() {
    this._internals = this.host.attachInternals?.();
  }
  @Listen('click')
  submit() {
    this._internals.form?.submit();
  }
}

Other information:

More about formAssociated elements use cases: https://web.dev/more-capable-form-controls/

Specifications of formAssociated elements: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example

A blog post about form related component with stencil \o/
https://www.hjorthhansen.dev/shadow-dom-form-participation/ , but formAssociated example seems to be pseudo code (not working) :/

Info about browser support https://www.chromestatus.com/feature/4708990554472448