Bug: React Handles Native Attributes Incorrectly for Custom Elements, Causing Runtime Errors

The common/global HTML attributes are treated differently between native elements and Custom Elements. For example, <input aria-invalid={true}> in React produces <input aria-invalid="true"> in the HTML. But <custom-element aria-invalid={true}> in React produces <custom-element aria-invalid> in the HTML. This leads to an inconsistent and bug-prone DX. In some cases, it also results in runtime errors.

Relates to: #32251

React Version: 19.1.1

Steps To Reproduce

For the form Attribute

1. Create a form-associated Custom Element
2. Define a form getter on it (similar to native form controls)
3. In React, attempt to point the Custom Element's form attribute to a specific <form> element

For the aria-invalid Attribute

1. Create a Custom Element
2. In React, set the Custom Element's aria-invalid attribute to true

Example Reproduction: https://stackblitz.com/edit/react-custom-elements-global-attrs?file=src%2FApp.tsx,index.html&terminal=dev

The current behavior

For the form Attribute

An error is thrown at runtime, because React tries to set a getter instead of altering the form attribute (which is what happens for native form controls).

For the aria-invalid Attribute

The attribute is set to an empty string ("") as if it were a literal boolean attribute.

The expected behavior

For the form Attribute

An error should not be thrown, and React should not attempt to set a JS Property. Instead, React should treat the attribute the same way it does for native form controls, setting the attribute only.

For the aria-invalid Attribute

The attribute should be treated the same way as it is for other native elements: aria-invalid={true} should become aria-invalid="true" and aria-invalid={false} should become aria-invalid="false".

The overall expectation beyond these 2 things is that for any attribute in the set of "common/nati