formData in web-components

class Toggle extends HTMLElement {
    #toggle = /*html*/`
    <input type="checkbox" ${this.checked ? 'checked' : ''} />
    `

    constructor() {
        super()

        const shadow = this.attachShadow({mode: 'open'})
        shadow.innerHTML = this.#toggle
        this.internals = this.attachInternals()

        shadow.querySelector('input').addEventListener('input', ({currentTarget}) => {
            this.checked = currentTarget.checked
        })
    }

    static formAssociated = true;

    get checked() {
        return this.hasAttribute('checked');
    }

    set checked(isChecked) {
        this.internals.setFormValue(this.getAttribute('value'))
        isChecked ? this.setAttribute('checked', '') : this.removeAttribute('checked')
    }
}
customElements.define('my-toggle', GfToggle)

<form>
  <my-toggle name="bla" value="foo"></my-toggle>
</form>