JSX prop works incorrectly on Custom Element, Preact fails to detect JS property setter

[trusktr]

• [ ] Check if updating to the latest Preact version resolves the issue

Describe the bug

Preact docs say the following:

When a Custom Element defines a setter for a given property, Preact detects its existence and will use the setter instead of an attribute.

However, I have Custom Elements with setters and Preact calls setAttribute instead of setting the JS properties as described.

To Reproduce

https://stackblitz.com/edit/create-preact-starter-ydvaru?file=src%2Findex.jsx

In this example, the console.asserts statements in the useEffect show that the JS property setter exists but that the attribute still gets set instead of the JS property.

The debugger statement in getMountPoint: it will pause on toString of the value passed into mount-point={}. When the devtools debugger is paused, we can see that the value gets passed into setAttribute.

Expected behavior

We expect the value to be passed to the JS property because the setter exists, as described in the Preact documentation.

[rschristian]

Can you please provide a minimal reproduction? It's much easier to help you if you cut everything down to the bare minimum.

If you're defining a custom element, do it in the reproduction please. Don't import libs from elsewhere if avoidable.

[trusktr]

Sure, here's a simplified example (updated OP). Basically same steps. I added console.asserts with descriptions inside the useEffect. Thanks for looking!

https://stackblitz.com/edit/create-preact-starter-ydvaru?file=src%2Findex.jsx

[rschristian]

This is working as intended.

mount-point and mountPoint are not the same thing; we don't try to coerce/guess prop names. If the label cannot be found on the DOM element, we set it as an attribute. You need to use <custom-element mountPoint={...}></custom-element>.

If you wanted to contribute a note on casing/naming, you could do so here

[trusktr]

Ah, I see. Thanks! Yeah that note will be useful.

[trusktr]

What are your thoughts on the wording here in this PR:

• https://github.com/preactjs/preact-www/pull/1156