Re: [WICG/webcomponents] Form-associated custom elements: being a submit button (#814)

julienw left a comment (WICG/webcomponents#814)

Hey folks!

Facing the same issue and having read the thread, I can suggest another possible fix in the spec: make writable the `form` property of the inputs and buttons and friends. (or possibly add a new one such as `formElement` to mimic the new `ariaControlsElements` and likewise properties that mirror the aria attributes -- but that looks superfluous).

With that, we could do something like that:
```js
class MyButton extends HTMLElement {
  static formAssociated = true;
  #internals;

  constructor() {
    super();
    this.#internals = this.attachInternals();

    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <button>Click me</button>
    `;

    shadow.querySelector('button').form = this.#internals.form;
  }
}

customElements.define('my-button', MyButton);

```

with this HTML:
```html
<form onsubmit="console.log('submitted!'); return false;">
  <label>User: <input type='text'></label>
  <label>Password: <input type='text'></label>
  <my-button>
</form>
```

How does that sound?

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/814#issuecomment-3382335174
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/814/3382335174@github.com>

Received on Wednesday, 8 October 2025 16:27:50 UTC