Bug: React overwrites functions on customElements

Why this is a good first issue

React's handling of custom element properties needs careful consideration.

AI Summary

The issue involves React incorrectly overriding functions on custom elements when setting attributes. The problem is identified in React's DOM property operations, but fixing it requires understanding React's internal handling of properties and attributes. The issue is test-focused, but the solution might impact existing behavior.

Issue Description

React version: 19.0.0

Steps To Reproduce

Define a custom element as shown:

class CEWithAttrPropertyClash extends HTMLElement {
    test(value) {
        this.dispatchEvent(new CustomEvent('test', {detail: value}))
    }
    connectedCallback() {
        this.test(true);
    }
}

customElements.define('ce-with-attr-property-clash', CEWithAttrPropertyClash);

Render

render(<ce-with-attr-property-clash test />);

Link to code example: https://codesandbox.io/p/sandbox/green-resonance-kpwcqg?file=%2Fsrc%2FApp.js%3A10%2C1

The current behavior

this.test is not a function

The expected behavior

React sets attribute as an attribute and does not override function definition

The culprit appears to be this line: https://github.com/facebook/react/blob/c56c6234328a29930487295afe61597db48f058c/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L220

Which does not check to see if the property is a settable property.

GitHub Labels

Status: Unconfirmed