Add more information about event and property binding on custom elements

[crutchcorn]

This PR aims to document the behavior around React 19 and Custom Elements more accurately. Namely, the previous docs had outdated information regarding property passing.

In the new docs, we cover:

• Property vs attribute passing
• How properties are detected by React
• Event binding and different casing edgecases

Questions

Some open-ended questions that I'd love feedback on from a reviewer:

1. Should we mention SSR behavior of Custom Elements? If so, what are they? The public proposal document outlines a few paths that may have been taken, but does not clarify which ones were taken in the end.

2. Should we mention other versions of React and when this support was introduced?

3. Should this be a dedicated reference page?

Preview of some of the docs

[github-actions]

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[eps1lon]

Thank you. Can we convert these snippets into sandboxes? Especially the event-handling part would be interesting to see in action.

[crutchcorn]

@eps1lon I was thinking the same thing. How is that done? Are there rules around what we should/not do in sandboxes? IE, is alert acceptable?

EDIT: I figured out the <Sandpack> component. Would you like me to add docs for that in CONTRIBUTING.md as well in a different PR?

[crutchcorn]

Code samples have been moved to Sandpack

[eps1lon]

very nice, thank you!

[eps1lon]

I figured out the component. Would you like me to add docs for that in CONTRIBUTING.md as well in a different PR?

If you think it's helpful. These sort of docs tend to get stale pretty quickly and I thought the Component was straight forward enough to be figured out by looking at existing usage.