Add custom element with method #2466

mrginglymus · 2024-12-08T10:30:12Z

React 19 has a very naïve heuristic for setting props vs attributes; if it detects a property on the custom element with the same name as the attribute, it sets it as a property. This doesn't work if you have a method on the custom element with the same name as an attribute you are trying to set.

Bug: React overwrites functions on customElements facebook/react#31689

I've attempted to provide a reproduction here; unfortunately this repository does not behave well on Windows or WSL, which are currently my only two options. I will investigate adding support for Windows devs in another PR.

google-cla · 2024-12-08T10:30:16Z

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

rschristian · 2024-12-09T11:44:50Z

libraries/react/src/basic-tests.js

+    it('will not overwrite methods', function () {
+      let root;
+      render(
+        <ComponentWithMethods
+          ref={(current) => {
+            root = current;
+          }}
+        />
+      )
+      let wc = root.wc;
+      expect(wc.innerText).to.eql('Success');
+    })
+


Should probably mirror this to Preact too, but Preact will fail for a similar reason:

https://github.com/preactjs/preact/blob/5c9625a56b8d99e905b3beba9c09b5062fe41287/src/diff/props.js#L121-L124

This is more of a limitation in the standard JSX syntax than anything else, framework has to make a guess when it comes to attrs vs props.

It would be great to see this across all the libraries and frameworks so they can make an active decision towards better support or not on their own terms.

I'm happy to extend it to as many of them as I can manage; I've manged to get tests mostly running with git bash on windows but it's still not fully happy.

I might also reframe the test to catch other potential gotchas - readonly fields, etc.

This is a great start, thanks @mrginglymus!

@Westbrook Indeed, it would be great to get this implemented for all the frameworks.

Can we make a new branch for this, and then make this PR merge to that branch instead of main, that way we can get individual PRs merged piece by piece into the branch until all the tests for each framework, and then finally we can make a final PR to merge the branch into main once it is ready? Who has control of the repo to make that branch?

This is more of a limitation in the standard JSX syntax than anything else, framework has to make a guess when it comes to attrs vs props.

@rschristian Solid.js and Pota both solve this within the limitation of JSX syntax, by looking for attr:foo=, prop:foo=, bool:foo=, and on:foo=. React and Preact could do something like that too, without having to update the JSX spec, as foo:bar= is already valid JSX.

Oh! Here's an idea.

Perhaps, we don't have to get all tests for all frameworks implemented. We could consider any framework that's missing the test as not passing. Then this would encourage framework authors to chip in (or whoever to contribute it when they can).

React and Preact could do something like that too, without having to update the JSX spec, as foo:bar= is already valid JSX.

Barely.

foo: is a namespace, not supported by default in Babel (or any other tooling as far as I am aware) and not supported at all in many others. I wrote a PR to support it in Preact months ago but support is pretty limited for utilizing that.

For what it's worth, tsc and vite seem to pass through namespaced attrs just fine. However, I don't think we need to solve React's problem here, just ensure that it's been recorded.

Oh neat, good to know! I believe esbuild didn't support that in the past, unless I'm misremembering.

Babel supports JSX namespaced attributes with the throwIfNamespace: false option, but that's not JSX's fault if some framework (f.e. React) doesn't do anything with those attributes.

It gets tiring when the solutions are obvious but frameworks ignore them. That's why I don't ever choose libraries like React with these limitations that are so easy to fix. Better alternatives exist (check out Solid.js for something similar to but fundamentally better than React).

…s with unwriteable properties

mrginglymus · 2024-12-16T08:00:46Z

I'm a little confused to as to how I'm supposed to add a successfully failing test...

mrginglymus · 2024-12-27T18:37:03Z

This PR now includes tests for all currently supported frameworks. There are many that have now dropped from 100%, mostly I think those using JSX-like syntax. I've tried to check each one's documentation for hints as to how to set attrs rather than props.

justinfagnani

Thanks! Looks good to me so far. Just a couple of comments...

justinfagnani · 2025-08-05T19:02:31Z

libraries/__shared__/webcomponents/src/ce-without-properties.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.


justinfagnani · 2025-08-05T19:04:04Z

libraries/__shared__/webcomponents/src/ce-without-properties.js

+ * limitations under the License.
+ */
+
+class CEWithoutProperties extends HTMLElement {


Maybe name this CEWithMethods? Or add a comment on what this class is testing?

justinfagnani · 2025-08-05T19:10:58Z

scripts/copy-and-verify-results.mjs

@@ -67,7 +67,7 @@ function compareResultsAgainstGoldens(library) {
  }
  // A constant, to make sure that if we add/remove any tests, that we add that test to all
  // tested libraries.
-  const numberOfTests = 32;
+  const numberOfTests = 34;


Do you know why this is adding two tests? It looks like there's just "will not overwrite unwriteable properties"

There are only 16 tests on master, 17 on this PR - something must be double-counting them.

Oh, it's chrome + firefox counted separately

justinfagnani

Are there any open issues for this new case?

There's at least facebook/react#31689 for React, but it's closed.

mrginglymus · 2025-08-06T12:11:44Z

Are there any open issues for this new case?

There's at least facebook/react#31689 for React, but it's closed.

I've re-opened it. Is there somewhere in this repo we reference open issues for failing tests?

mrginglymus · 2025-08-07T07:41:02Z

If there's a chance that #2474 might get merged soon, I'd rather that get merged before this - deconflicting this on top of that one will more pleasant than vice versa.

Add custom element with method

3dccd5f

Add vue, svlete tests

262fd1c

This was referenced Dec 8, 2024

Bug: React overwrites functions on customElements facebook/react#31689

Open

New test: control over setting attributes, JS properties, events, and boolean attributes #2352

Open

rschristian reviewed Dec 9, 2024

View reviewed changes

mrginglymus force-pushed the ce-with-methods branch from dbfc970 to 40e87e6 Compare December 10, 2024 13:42

Switch to more comprehensive tests of setting attributes sharing name…

e359f1c

…s with unwriteable properties

mrginglymus force-pushed the ce-with-methods branch from 40e87e6 to e359f1c Compare December 10, 2024 13:54

mrginglymus added 14 commits December 16, 2024 13:54

Update goldens

21bcfe1

hyperapp

5ef6462

hyperhtml

f2f95b3

lit

a15d495

lwc

8b15eb1

Mithril

083f7eb

omi

57fc2f8

polymer

c6dacc5

preact

d0dad12

riot

357915b

skate

9763c5e

Solid

4f8f7e5

stencil

8ee776b

surplus

7e7d1e7

mrginglymus force-pushed the ce-with-methods branch from 820f51b to 7e7d1e7 Compare December 27, 2024 18:21

Update goldens

65332c4

mrginglymus requested review from Westbrook, trusktr and rschristian December 27, 2024 18:32

Merge branch 'main' into ce-with-methods

b924ee7

justinfagnani reviewed Aug 5, 2025

View reviewed changes

Rename to custom-element-without-settable-properties

ef4118a

mrginglymus requested a review from justinfagnani August 6, 2025 12:22

Add custom element with method #2466

Are you sure you want to change the base?

Add custom element with method #2466

Uh oh!

Conversation

mrginglymus commented Dec 8, 2024

Uh oh!

google-cla bot commented Dec 8, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

trusktr Dec 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rschristian Dec 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

trusktr Apr 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mrginglymus commented Dec 16, 2024

Uh oh!

mrginglymus commented Dec 27, 2024

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

mrginglymus commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrginglymus commented Aug 7, 2025

Uh oh!

Uh oh!

trusktr Dec 15, 2024 •

edited

Loading

rschristian Dec 15, 2024 •

edited

Loading

trusktr Apr 26, 2025 •

edited

Loading

mrginglymus commented Aug 6, 2025 •

edited

Loading