Send The Input Value From A Web Component On Form Submit

Deatils

• This mehod uses an 'input' element inside a web component whose value is included when the form is submitted
• Details on the methodology are below the example

EXAMPLE

HTML

<form>
  <custom-input></custom-input>
  <input type="submit" name="submit" value="submit" />
</form>

JavaScript

class CustomInput extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' })

        this.input = document.createElement('input')
        this.input.name = 'customInput'
        this.input.value = 'Alfa Bravo'

        const updateData = (event) => {
            event.formData.append(this.input.name, this.input.value)
        }

        this.shadowRoot.append(this.input)

        document.addEventListener('formdata', updateData)
    }
}

customElements.define('custom-input', CustomInput)

Notes

• TODO: write up the details of functionality
• The .name isn't required on the element. It could be set directly in the response
• The plainenglish post talked about using 'ElementInternals' but those aren't supported in Safar at press time

References

• MDN: ElementInternals
• Web Components Can Now Be Native Form Elements - plainenglish
• MDN: Using FormData Objects
• MDN: FormData()
• MDN: FormData
• Shadow DOM v1 - Self-Contained Web Components
• Introduction To Web Components
• Custom elements, shadow DOM and implicit form submission