formdata event

[jpic]

Feature Request

Support for plain HTML form for mwc-textfield & other form elements: currently, placing an mwc-texfield inside a form will not make the form pick up its value.

Proposed solution

Implement formdata event:

• The formdata event lets an arbitrary JavaScript object participate in form submission, so you can add form data without using a hidden .
• The Form-associated custom elements API lets custom elements act more like built-in form controls.

Alternatives considered

I've considered creating a custom form WC too but it doesn't seem necessary on the long run

[asyncLiz]

Unlike MWC, MDC does not use shadow DOM and does not face the same challenges that custom elements do when integrating with forms. You can add a name attribute to the mdc-text-field__input element of an MDC text field to integrate it with HTML forms.

<form>
  <label class="mdc-text-field mdc-text-field--filled">
    <span class="mdc-text-field__ripple"></span>
    <span class="mdc-floating-label">Label</span>
    <input class="mdc-text-field__input" name="formkey">
    <span class="mdc-line-ripple"></span>
  </label>

  <button type="submit">Submit</button>
</form>

For <mwc-textfield> and other MWC custom elements, you can subscribe to material-components/material-web#289 to track form integration support (either with the formdata event or the form associated API).