[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"quiz-elementinternals-form-associated-custom-elements":44,"search-suggestions":60,"quiz-article-elementinternals-form-associated-custom-elements":105},[4,20,32],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Read it. Run it. Prove it.","A post a day on modern web development — most with an editable playground and a quiz that explains every answer. Free, no account needed.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Grammar explained the way good documentation explains an API — one idea at a time, each with a quiz.","amber-400","⌘",[13,15,29],"es",{"courses":18,"paths":18,"articles":17,"exams":18,"flashcards":17,"packages":18,"community":17,"certificates":17,"teams":18,"commerce":18},2,{"id":33,"slug":34,"name":35,"tagline":36,"description":37,"accentFrom":38,"accentTo":39,"icon":40,"defaultLocale":13,"locales":41,"features":42,"position":43},"7b3c16f2-931d-410e-802e-e1fa4edab7de","soft","Soft Skills","The half of the job nobody wrote documentation for.","Weekly, on the parts of working life that decide more than your code does — first weeks, meetings, interviews, promotions, and the people around you. Written from what actually happens, and recorded as a podcast you can listen to on the walk.","emerald-400","teal-300","◉",[13],{"courses":18,"paths":18,"articles":17,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":18},3,{"id":45,"slug":46,"kind":47,"title":48,"description":49,"config":50,"verticalId":5,"vertical":55,"course":52,"_count":56,"access":57,"attempts":59,"questionCount":51},"01a08af7-94a6-7638-a173-3ad8a079bd7f","elementinternals-form-associated-custom-elements","PRACTICE_QUIZ","ElementInternals — form-associated custom elements","Check what you took from the post: why plain custom elements are invisible to \u003Cform>, what static formAssociated and attachInternals() actually unlock, and where the hidden-input hack quietly falls apart.",{"questionCount":51,"timeLimitSec":52,"shuffleQuestions":18,"shuffleOptions":17,"negativeMarking":19,"passScorePct":53,"maxAttempts":52,"revealAnswers":54,"allowFlagging":18,"allowBacktracking":17},7,null,70,"AFTER_SUBMIT",{"slug":6,"name":7},{"questions":51},{"allowed":17,"reason":58},"FREE",[],[61,65,69,72,76,80,84,88,91,95,98,102],{"slug":62,"name":63,"articles":64},"webdev","Webdev",97,{"slug":66,"name":67,"articles":68},"javascript","Javascript",81,{"slug":70,"name":71,"articles":53},"frontend","Frontend",{"slug":73,"name":74,"articles":75},"css","Css",32,{"slug":77,"name":78,"articles":79},"tutorial","Tutorial",27,{"slug":81,"name":82,"articles":83},"typescript","Typescript",14,{"slug":85,"name":86,"articles":87},"react","React",12,{"slug":89,"name":90,"articles":87},"performance","Performance",{"slug":92,"name":93,"articles":94},"browser","Browser",8,{"slug":96,"name":97,"articles":94},"node","Node",{"slug":99,"name":100,"articles":101},"grammar","Grammar",6,{"slug":103,"name":104,"articles":101},"programming","Programming",{"id":106,"slug":46,"title":107,"subtitle":52,"excerpt":108,"coverUrl":109,"locale":13,"readingMinutes":110,"publishedAt":111,"viewCount":112,"likeCount":19,"commentCount":19,"author":113,"vertical":118,"topic":119,"tags":121,"_count":130,"playground":132,"body":134,"bodyMd":248,"seo":249,"translationGroupId":252,"series":52,"podcastUrl":52,"verticalId":5,"thread":253,"assessments":255,"translations":258,"quiz":260},"01a08af7-9462-760d-89bf-e4ef3c77bb6a","The Star Rating That Never Reaches Your Server","A custom \u003Cstar-rating> element sits inside a \u003Cform>, looks like a form field, and gets left out of the submission entirely. The browser has a real fix for this — most teams reach for a hack instead.","\u002Fmedia\u002Fcovers\u002Felementinternals-form-associated-custom-elements.png",4,"2026-09-15T11:25:41.972Z",34,{"id":114,"name":115,"username":116,"avatarUrl":52,"headline":117},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":66,"name":120},"JavaScript",[122,123,126,129],{"slug":66,"name":67,"color":52},{"slug":124,"name":125,"color":52},"webcomponents","Web Components",{"slug":127,"name":128,"color":52},"forms","Forms",{"slug":62,"name":63,"color":52},{"assessments":131},1,{"slug":46,"title":133},"ElementInternals — interactive playground",{"blocks":135,"version":131},[136,140,143,148,151,154,157,160,163,166,169,172,175,181,186,189,192,195,198,202,205,208,211,214,217,220,223,226,229,232,235,238,241],{"id":137,"html":138,"type":139},"b1","\u003Cp>You build a \u003Ccode><star-rating>\u003C\u002Fcode> custom element. Five clickable stars, a nice hover state, a \u003Ccode>value\u003C\u002Fcode> property. You drop it into a signup form next to the real inputs. It looks identical to everything around it.\u003C\u002Fp>","paragraph",{"id":141,"html":142,"type":139},"b2","\u003Cp>You submit the form. \u003Ccode>FormData\u003C\u002Fcode> comes back with the email, the password, the checkbox — and no rating. Not empty. Missing. As far as the \u003Ccode><form>\u003C\u002Fcode> is concerned, your custom element was never there.\u003C\u002Fp>",{"id":144,"html":145,"text":146,"type":147,"level":31},"b3","The form doesn't see what you think it sees","The form doesn't see what you think it sees","heading",{"id":149,"html":150,"type":139},"b4","\u003Cp>A \u003Ccode><form>\u003C\u002Fcode> only collects values from elements it recognizes as form controls. That's a fixed list baked into the platform: \u003Ccode><input>\u003C\u002Fcode>, \u003Ccode><select>\u003C\u002Fcode>, \u003Ccode><textarea>\u003C\u002Fcode>, \u003Ccode><button>\u003C\u002Fcode>, a handful of others. A custom element — no matter how convincingly it renders, no matter what you name its property — isn't on that list. It can have a \u003Ccode>name\u003C\u002Fcode> attribute. It can have a \u003Ccode>value\u003C\u002Fcode> getter. The form still walks past it like it's a \u003Ccode><div>\u003C\u002Fcode>, because as far as form submission is concerned, it is one.\u003C\u002Fp>",{"id":152,"html":153,"type":139},"b5","\u003Cp>Same story for the rest of the form contract you got for free with \u003Ccode><input>\u003C\u002Fcode>: \u003Ccode><label for="rating">\u003C\u002Fcode> won't focus it, \u003Ccode>required\u003C\u002Fcode> won't block submission on it, \u003Ccode>:invalid\u003C\u002Fcode> won't style it, \u003Ccode>form.reset()\u003C\u002Fcode> won't clear it. None of that is wired up — there was never a mechanism for a custom element to opt in.\u003C\u002Fp>",{"id":155,"html":156,"type":139},"b6","\u003C!-- playground:start -->",{"id":158,"html":159,"text":159,"type":147,"level":31},"b7","🎮 Try it yourself",{"id":161,"html":162,"type":139},"b8","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Felementinternals-form-associated-custom-elements\u002Fplayground\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":164,"html":165,"type":139},"b9","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":167,"html":168,"type":139},"b10","\u003C!-- playground:end -->",{"id":170,"html":171,"text":171,"type":147,"level":31},"b11","The fix everyone reaches for first",{"id":173,"html":174,"type":139},"b12","\u003Cp>The obvious move is a hidden mirror:\u003C\u002Fp>",{"id":176,"code":177,"type":178,"language":179,"highlight":180},"b13","\u003Cstar-rating id=\"stars\">\u003C\u002Fstar-rating>\n\u003Cinput type=\"hidden\" name=\"rating\" id=\"rating-mirror\" \u002F>","code","html",[],{"id":182,"code":183,"type":178,"language":184,"highlight":185},"b14","stars.addEventListener(\"change\", () => {\n  ratingMirror.value = stars.value;\n});","js",[],{"id":187,"html":188,"type":139},"b15","\u003Cp>This works, in the sense that a value now shows up in \u003Ccode>FormData\u003C\u002Fcode>. It also means you're maintaining a second element whose only job is being real where the first one is fake. Every place the rating can change — clicking a star, a keyboard shortcut, a preset button — needs to remember to update the mirror too, or the two drift apart silently.\u003C\u002Fp>",{"id":190,"html":191,"type":139},"b16","\u003Cp>\u003Ccode>required\u003C\u002Fcode> looks like the next box to tick, so someone adds it to the hidden input. It does nothing. \u003Ccode><input type="hidden">\u003C\u002Fcode> is explicitly excluded from constraint validation — the spec calls it "barred from constraint validation" — so a required hidden field is always considered valid, full stop. What actually ships instead is a hand-rolled check bolted onto the submit handler: \u003Ccode>if (!ratingMirror.value) event.preventDefault()\u003C\u002Fcode>. That's \u003Ccode>required\u003C\u002Fcode>, reimplemented in application code, with no \u003Ccode>:invalid\u003C\u002Fcode> styling and no native "please fill this out" message — because the one place that logic could have lived natively was never a candidate for it. \u003Ccode>form.reset()\u003C\u002Fcode> clears the hidden input's value but not the visible stars, so that's another listener to write by hand. Every native behavior you're missing gets re-implemented as its own event listener, on its own element, that has to stay in sync with the one the user actually sees.\u003C\u002Fp>",{"id":193,"html":194,"text":194,"type":147,"level":31},"b17","The part of the platform built for exactly this",{"id":196,"html":197,"type":139},"b18","\u003Cp>Custom elements have been able to register as real form participants since \u003Ccode>ElementInternals\u003C\u002Fcode> shipped — no hidden input, no manual sync:\u003C\u002Fp>",{"id":199,"code":200,"type":178,"language":184,"highlight":201},"b19","class StarRating extends HTMLElement {\n  static formAssociated = true; \u002F\u002F opts into the form-control contract\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    this._value = 0;\n  }\n\n  set value(v) {\n    this._value = v;\n    this._internals.setFormValue(String(v)); \u002F\u002F this is what FormData reads now\n    this._internals.setValidity(\n      this.required && v === 0 ? { valueMissing: true } : {},\n      \"Pick a rating.\",\n      this \u002F\u002F anchor for the native validation bubble\n    );\n  }\n\n  get value() {\n    return this._value;\n  }\n\n  formResetCallback() {\n    this.value = 0; \u002F\u002F form.reset() now clears the widget for free\n  }\n\n  formDisabledCallback(disabled) {\n    this.toggleAttribute(\"aria-disabled\", disabled);\n  }\n}\ncustomElements.define(\"star-rating\", StarRating);",[],{"id":203,"html":204,"type":139},"b20","\u003Cp>\u003Ccode>attachInternals()\u003C\u002Fcode> hands back an \u003Ccode>ElementInternals\u003C\u002Fcode> object that's the element's private line to the form machinery — \u003Ccode>setFormValue()\u003C\u002Fcode> is what \u003Ccode>FormData\u003C\u002Fcode> actually reads, and it's the only line in this class that touches submission. \u003Ccode>setValidity()\u003C\u002Fcode> plugs into the same constraint-validation system \u003Ccode>required\u003C\u002Fcode> and \u003Ccode>:invalid\u003C\u002Fcode> already use, so \u003Ccode>form.checkValidity()\u003C\u002Fcode> and \u003Ccode>reportValidity()\u003C\u002Fcode> see this element exactly like a native input. \u003Ccode>formResetCallback()\u003C\u002Fcode> and \u003Ccode>formDisabledCallback()\u003C\u002Fcode> are lifecycle hooks the browser calls on its own — no listener to attach, no sync to forget.\u003C\u002Fp>",{"id":206,"html":207,"type":139},"b21","\u003Cp>The hidden-input version and this version produce the same \u003Ccode>FormData\u003C\u002Fcode> on a good day. They stop matching the moment something goes wrong: an empty required field, a form reset mid-interaction, a disabled fieldset. That's exactly the code the mirror-input hack never got right, because nothing forced it to.\u003C\u002Fp>",{"id":209,"html":210,"type":139},"b22","\u003C!-- quiz:start -->",{"id":212,"html":213,"text":213,"type":147,"level":31},"b23","🧠 Test yourself",{"id":215,"html":216,"type":139},"b24","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Felementinternals-form-associated-custom-elements\u002Fquiz\">Take the 7-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":218,"html":219,"type":139},"b25","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":221,"html":222,"type":139},"b26","\u003C!-- quiz:end -->",{"id":224,"html":225,"text":225,"type":147,"level":31},"b27","What this buys you",{"id":227,"html":228,"type":139},"b28","\u003Cp>This isn't just less code — it's less code that lies about being finished. The hidden-input version \u003Cem>looks\u003C\u002Fem> like a form field to a skim-read, right up until QA resets the form or a screen reader user tabs to the \u003Ccode><label>\u003C\u002Fcode> expecting it to do something. \u003Ccode>ElementInternals\u003C\u002Fcode> doesn't make custom elements harder to write; it makes them stop pretending to be inputs and actually become one, using the exact validation and submission pipeline the browser already runs for everything else on the page.\u003C\u002Fp>",{"id":230,"html":231,"type":139},"b29","\u003Cp>If you've got a design-system component masquerading as a form field with a hidden \u003Ccode><input>\u003C\u002Fcode> glued to its side, that's a straightforward swap now. What's the ugliest hidden-input-sync hack you're still carrying?\u003C\u002Fp>",{"id":233,"type":234},"b30","divider",{"id":236,"html":237,"type":139},"b31","\u003Cp>🚀 \u003Cstrong>Want more like this?\u003C\u002Fstrong> Every guide, playground, and quiz lives on \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002F\">bestpractic.org\u003C\u002Fa>\u003C\u002Fstrong> — open it and \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002F\">sign up free\u003C\u002Fa>\u003C\u002Fstrong> so the next one finds you.\u003C\u002Fp>",{"id":239,"html":240,"type":139},"b32","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":242,"type":243,"items":244,"ordered":18},"b33","list",[245,246,247],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","You build a `\u003Cstar-rating>` custom element. Five clickable stars, a nice hover state, a `value` property. You drop it into a signup form next to the real inputs. It looks identical to everything around it.\n\nYou submit the form. `FormData` comes back with the email, the password, the checkbox — and no rating. Not empty. Missing. As far as the `\u003Cform>` is concerned, your custom element was never there.\n\n## The form doesn't see what you think it sees\n\nA `\u003Cform>` only collects values from elements it recognizes as form controls. That's a fixed list baked into the platform: `\u003Cinput>`, `\u003Cselect>`, `\u003Ctextarea>`, `\u003Cbutton>`, a handful of others. A custom element — no matter how convincingly it renders, no matter what you name its property — isn't on that list. It can have a `name` attribute. It can have a `value` getter. The form still walks past it like it's a `\u003Cdiv>`, because as far as form submission is concerned, it is one.\n\nSame story for the rest of the form contract you got for free with `\u003Cinput>`: `\u003Clabel for=\"rating\">` won't focus it, `required` won't block submission on it, `:invalid` won't style it, `form.reset()` won't clear it. None of that is wired up — there was never a mechanism for a custom element to opt in.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Felementinternals-form-associated-custom-elements\u002Fplayground)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## The fix everyone reaches for first\n\nThe obvious move is a hidden mirror:\n\n```html\n\u003Cstar-rating id=\"stars\">\u003C\u002Fstar-rating>\n\u003Cinput type=\"hidden\" name=\"rating\" id=\"rating-mirror\" \u002F>\n```\n\n```js\nstars.addEventListener(\"change\", () => {\n  ratingMirror.value = stars.value;\n});\n```\n\nThis works, in the sense that a value now shows up in `FormData`. It also means you're maintaining a second element whose only job is being real where the first one is fake. Every place the rating can change — clicking a star, a keyboard shortcut, a preset button — needs to remember to update the mirror too, or the two drift apart silently.\n\n`required` looks like the next box to tick, so someone adds it to the hidden input. It does nothing. `\u003Cinput type=\"hidden\">` is explicitly excluded from constraint validation — the spec calls it \"barred from constraint validation\" — so a required hidden field is always considered valid, full stop. What actually ships instead is a hand-rolled check bolted onto the submit handler: `if (!ratingMirror.value) event.preventDefault()`. That's `required`, reimplemented in application code, with no `:invalid` styling and no native \"please fill this out\" message — because the one place that logic could have lived natively was never a candidate for it. `form.reset()` clears the hidden input's value but not the visible stars, so that's another listener to write by hand. Every native behavior you're missing gets re-implemented as its own event listener, on its own element, that has to stay in sync with the one the user actually sees.\n\n## The part of the platform built for exactly this\n\nCustom elements have been able to register as real form participants since `ElementInternals` shipped — no hidden input, no manual sync:\n\n```js\nclass StarRating extends HTMLElement {\n  static formAssociated = true; \u002F\u002F opts into the form-control contract\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    this._value = 0;\n  }\n\n  set value(v) {\n    this._value = v;\n    this._internals.setFormValue(String(v)); \u002F\u002F this is what FormData reads now\n    this._internals.setValidity(\n      this.required && v === 0 ? { valueMissing: true } : {},\n      \"Pick a rating.\",\n      this \u002F\u002F anchor for the native validation bubble\n    );\n  }\n\n  get value() {\n    return this._value;\n  }\n\n  formResetCallback() {\n    this.value = 0; \u002F\u002F form.reset() now clears the widget for free\n  }\n\n  formDisabledCallback(disabled) {\n    this.toggleAttribute(\"aria-disabled\", disabled);\n  }\n}\ncustomElements.define(\"star-rating\", StarRating);\n```\n\n`attachInternals()` hands back an `ElementInternals` object that's the element's private line to the form machinery — `setFormValue()` is what `FormData` actually reads, and it's the only line in this class that touches submission. `setValidity()` plugs into the same constraint-validation system `required` and `:invalid` already use, so `form.checkValidity()` and `reportValidity()` see this element exactly like a native input. `formResetCallback()` and `formDisabledCallback()` are lifecycle hooks the browser calls on its own — no listener to attach, no sync to forget.\n\nThe hidden-input version and this version produce the same `FormData` on a good day. They stop matching the moment something goes wrong: an empty required field, a form reset mid-interaction, a disabled fieldset. That's exactly the code the mirror-input hack never got right, because nothing forced it to.\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 7-question quiz →](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Felementinternals-form-associated-custom-elements\u002Fquiz)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n\n## What this buys you\n\nThis isn't just less code — it's less code that lies about being finished. The hidden-input version *looks* like a form field to a skim-read, right up until QA resets the form or a screen reader user tabs to the `\u003Clabel>` expecting it to do something. `ElementInternals` doesn't make custom elements harder to write; it makes them stop pretending to be inputs and actually become one, using the exact validation and submission pipeline the browser already runs for everything else on the page.\n\nIf you've got a design-system component masquerading as a form field with a hidden `\u003Cinput>` glued to its side, that's a straightforward swap now. What's the ugliest hidden-input-sync hack you're still carrying?\n\n---\n\n🚀 **Want more like this?** Every guide, playground, and quiz lives on **[bestpractic.org](https:\u002F\u002Fbestpractic.org\u002F)** — open it and **[sign up free](https:\u002F\u002Fbestpractic.org\u002F)** so the next one finds you.\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)",{"title":107,"canonical":250,"description":251},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Felementinternals-form-associated-custom-elements","A custom \u003Cstar-rating> element sits inside a \u003Cform>, looks like a form field, and gets left out of the submission entirely. The browser has a real fix for this — most teams reach f","01a08af7-9462-760d-89bf-e99efa0702d1",{"id":254,"locked":18},"01a08af7-9487-7796-89a7-5e19d3ac25e8",[256],{"id":45,"slug":46,"title":48,"_count":257},{"questions":51},[259],{"locale":13,"slug":46},{"id":45,"slug":46,"title":48,"_count":261,"questionCount":51},{"questions":51}]