Skip to content

Commit f2c2e33

Browse files
committedFeb 8, 2024
document hyphens in tag names
feature brought by rescript-lang/rescript#6609
1 parent 9a59bd4 commit f2c2e33

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed
 

‎pages/docs/manual/latest/jsx.mdx

+25
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@ React.createElement(MyComponent, {
164164
- Attributes and children don't mandate `{}`, but we show them anyway for ease of learning. Once you format your file, some of them go away and some turn into parentheses.
165165
- Props spread is supported, but there are some restrictions (see below).
166166
- Punning!
167+
- Props and tag names have to follow ReScript's restrictions on identifiers at the exception of hyphens for lowercase tags ([see below](#hyphens-in-tag-names)).
167168

168169
### Spread Props
169170

@@ -230,6 +231,30 @@ Consequently, a JSX component can cram in a few more props before reaching for e
230231

231232
**Note** that this is a departure from ReactJS JSX, which does **not** have punning. ReactJS' `<input checked />` desugars to `<input checked=true />`, in order to conform to DOM's idioms and for backward compatibility.
232233

234+
### Hyphens in tag names
235+
236+
**Since 11.1**
237+
238+
JSX now supports lowercase tags with hyphens in their name. This allows to bind
239+
to web components.
240+
241+
Note though that props names can't have hyphens, you should use `@as` to bind to
242+
such props in your custom `JsxDOM.domProps` type ([see generic JSX transform](#generic-jsx-transform-jsx-beyond-react-experimental)).
243+
244+
<CodeTab labels={["ReScript", "JS Output"]}>
245+
246+
```res
247+
<model-viewer src touchActions="pan-y"></model-viewer>
248+
```
249+
```js
250+
React.createElement("model-viewer", {
251+
"touch-actions": "pan-y",
252+
src: src
253+
});
254+
```
255+
256+
</CodeTab>
257+
233258
## Generic JSX transform: JSX beyond React (experimental)
234259

235260
**Since 11.1**

0 commit comments

Comments
 (0)