© 2026 Hedgehog Software, LLC
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>
my-toggle
console.log(new FormData(form))