You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[nexr] DOM docs: document locked to properties attributes, add xmlns requirement for partials (#2645)
* improve default to properties DOM docs, add xmlns requirement for partials
* remove unrelated entries from table
* clarify that xmlns is added automatically when possible
* make more clear we default to atrributes now
* add textarea.value
* Complete list of attributes that are locked to properties
Copy file name to clipboardExpand all lines: documentation/solid-2.0/07-dom.md
+4-5Lines changed: 4 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,9 +18,10 @@ DOM behavior in Solid 2.0 follows HTML standards by default: attributes over pro
18
18
-**Attributes over properties:** Prefer setting attributes rather than properties in almost all cases. Aligns with web components and SSR.
19
19
-**Lowercasing:** Use HTML lowercase for built-in attribute names (no camelCase for attributes). Exceptions:
20
20
-**Event handlers** remain camelCase (e.g. `onClick`) to keep the `on` modifier clear.
21
-
-**Default attributes** such as `value`, `selected`, `checked`, `muted`continue to be handled as props where that avoids confusion.
21
+
-**Default to attributes**But attributes such as `input.value`, `input.defaultValue`, `input.checked`, `input.defaultChecked`, `select.value`, `option.value`, `option.selected`, `option.defaultSelected`, `textarea.value`, `textarea.defaultValue`, `video.muted`, `video.defaultMuted`, `audio.muted`, `audio.defaultMuted`continue to be handled as props where that avoids confusion. Unfortunately, this leads to all form fields be special cased. For example: `<input value={dynamicCurrentValue()} defaultValue={dynamicDefaultValue()}/>` either can be dynamic or static, and in the absense of `defaultValue`, then, `value` is SSRed.
22
22
-**Namespaces:**`attr:` and `bool:` namespaces are removed; the single standard behavior makes the model consistent.
23
-
23
+
-**XML Namespaces:**`svg` and `math` work as expected, however when using XML partials, an `xmlns` attribute is required for the browser to create the elements with the correct namespace. Solid adds these automatically to the tags that can recognize as SVG/MathML. For example an `a` tag returned from a partial to be used in XML need `xmlns` added by the user.
24
+
24
25
### Enhanced class prop
25
26
26
27
-**`classList` is removed;** its behavior is merged into `class`.
@@ -117,8 +118,6 @@ Used as:
117
118
|`oncapture:`| Removed (replacement pattern TBD / use native event options where applicable) |
118
119
|`attr:` / `bool:` namespaces | Single attribute/property model above |
|`createMutable` (from Solid primitives) | Moved to / available from `@solidjs/signals` or primitives layer |
121
-
|`scheduler` / `createDeferred`| Moved to primitives; use primitives API |
122
121
123
122
`@solidjs/legacy` can provide compatibility for deprecated DOM APIs where feasible.
124
123
@@ -129,4 +128,4 @@ Used as:
129
128
130
129
## Open questions
131
130
132
-
- Exact list of "default" props that stay as props (`value`, `selected`, `checked`, `muted`, …).
131
+
- Exact list of "default" props that stay as props (`input.value`, `input.defaultValue`, `input.checked`, `input.defaultChecked`, `select.value`, `option.value`, `option.selected`, `option.defaultSelected`, `textarea.value`, `textarea.defaultValue`, `video.muted`, `video.defaultMuted`, `audio.muted`, `audio.defaultMuted`, …). Generally, stateful DOM properties should be considered on this list.
0 commit comments