[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"term-e\u002Felementinternals":3,"related-e\u002Felementinternals":219},{"id":4,"title":5,"acronym":6,"body":7,"category":200,"description":201,"difficulty":202,"extension":203,"letter":204,"meta":205,"navigation":206,"path":207,"related":208,"seo":213,"sitemap":214,"stem":217,"subcategory":6,"__hash__":218},"terms\u002Fterms\u002Fe\u002Felementinternals.md","ElementInternals",null,{"type":8,"value":9,"toc":194},"minimark",[10,15,19,23,26,30,183,187,190],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"ElementInternals is what finally lets a custom my-input element behave like a real form field: showing up in FormData, participating in validation, getting labelled by label for, all the stuff native input elements get for free. Before this, Web Components had to fake being form fields with hacky workarounds. Now they can actually join the form.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"ElementInternals is a browser API that lets custom elements participate in HTML forms and accessibility trees natively, by attaching internals via attachInternals(). It enables form associated custom elements to set form values, expose validity states, and define ARIA properties without needing a hidden native input as a workaround.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","class RatingInput extends HTMLElement {\n  static formAssociated = true;\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n  setValue(v) {\n    this.internals.setFormValue(v);\n  }\n}\n","javascript","",[38,39,40,63,83,94,105,127,133,151,172,177],"code",{"__ignoreMap":36},[41,42,45,49,53,56,59],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"spNyl","class",[41,50,52],{"class":51},"sBMFI"," RatingInput",[41,54,55],{"class":47}," extends",[41,57,58],{"class":51}," HTMLElement",[41,60,62],{"class":61},"sMK4o"," {\n",[41,64,66,69,73,76,80],{"class":43,"line":65},2,[41,67,68],{"class":47},"  static",[41,70,72],{"class":71},"swJcz"," formAssociated",[41,74,75],{"class":61}," =",[41,77,79],{"class":78},"sfNiH"," true",[41,81,82],{"class":61},";\n",[41,84,86,89,92],{"class":43,"line":85},3,[41,87,88],{"class":47},"  constructor",[41,90,91],{"class":61},"()",[41,93,62],{"class":61},[41,95,97,101,103],{"class":43,"line":96},4,[41,98,100],{"class":99},"sTEyZ","    super",[41,102,91],{"class":71},[41,104,82],{"class":61},[41,106,108,111,114,116,119,123,125],{"class":43,"line":107},5,[41,109,110],{"class":61},"    this.",[41,112,113],{"class":99},"internals",[41,115,75],{"class":61},[41,117,118],{"class":61}," this.",[41,120,122],{"class":121},"s2Zo4","attachInternals",[41,124,91],{"class":71},[41,126,82],{"class":61},[41,128,130],{"class":43,"line":129},6,[41,131,132],{"class":61},"  }\n",[41,134,136,139,142,146,149],{"class":43,"line":135},7,[41,137,138],{"class":71},"  setValue",[41,140,141],{"class":61},"(",[41,143,145],{"class":144},"sHdIc","v",[41,147,148],{"class":61},")",[41,150,62],{"class":61},[41,152,154,156,158,161,164,166,168,170],{"class":43,"line":153},8,[41,155,110],{"class":61},[41,157,113],{"class":99},[41,159,160],{"class":61},".",[41,162,163],{"class":121},"setFormValue",[41,165,141],{"class":71},[41,167,145],{"class":99},[41,169,148],{"class":71},[41,171,82],{"class":61},[41,173,175],{"class":43,"line":174},9,[41,176,132],{"class":61},[41,178,180],{"class":43,"line":179},10,[41,181,182],{"class":61},"}\n",[11,184,186],{"id":185},"when-youll-hear-this","When You'll Hear This",[16,188,189],{},"\"Once we used ElementInternals, our custom rating widget finally showed up in FormData on submit.\" \u002F \"ElementInternals gives Web Components real form validity states, not just a fake required attribute.\"",[191,192,193],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":65,"depth":65,"links":195},[196,197,198,199],{"id":13,"depth":65,"text":14},{"id":21,"depth":65,"text":22},{"id":28,"depth":65,"text":29},{"id":185,"depth":65,"text":186},"frontend","ElementInternals is what finally lets a custom my-input element behave like a real form field: showing up in FormData, participating in validation, getting...","advanced","md","e",{},true,"\u002Fterms\u002Fe\u002Felementinternals",[209,210,211,212],"Custom Elements","Web Components","ARIA","Shadow DOM",{"title":5,"description":201},{"changefreq":215,"priority":216},"weekly",0.7,"terms\u002Fe\u002Felementinternals","wQqigjBfzZkr6m9NGThkrJKIUhoY5vnc_vAWGd3iKSw",[220,224,227,230],{"title":211,"path":221,"acronym":6,"category":200,"difficulty":222,"description":223},"\u002Fterms\u002Fa\u002Faria","intermediate","ARIA stands for Accessible Rich Internet Applications.",{"title":209,"path":225,"acronym":6,"category":200,"difficulty":222,"description":226},"\u002Fterms\u002Fc\u002Fcustom-elements","Custom Elements let you define your own HTML tags that the browser recognizes as first-class citizens. Want a \u003Cfancy-tooltip> tag?",{"title":212,"path":228,"acronym":6,"category":200,"difficulty":202,"description":229},"\u002Fterms\u002Fs\u002Fshadow-dom","Shadow DOM is like a force field around your component's internals.",{"title":210,"path":231,"acronym":6,"category":200,"difficulty":222,"description":232},"\u002Fterms\u002Fw\u002Fweb-components","Web Components are the browser's native component system. Custom elements, shadow DOM, templates - no framework needed.",1792528081419]