Skip to content

Commit 921e3b1

Browse files
LadyBluenotesLadyBluenotes
committed
jsx styling and content attribute refs
1 parent 20117b9 commit 921e3b1

4 files changed

Lines changed: 124 additions & 79 deletions

File tree

‎src/routes/reference/jsx-attributes/classlist.mdx‎

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,46 @@
22
title: classList
33
order: 1
44
use_cases: >-
5-
styling components, dynamic classes, conditional styles, toggling classes,
6-
reactive styling
5+
toggling classes, conditional classes, reactive class updates
76
tags:
87
- styling
98
- css
109
- classes
1110
- reactive
12-
- conditional
13-
- dom
1411
version: "1.0"
1512
description: >-
16-
Manage element classes dynamically in SolidJS with class and classList
17-
attributes. Toggle multiple classes reactively based on application state.
13+
Toggle element classes from an object of class names and boolean values.
1814
---
1915

20-
Solid offers two attributes to set the class of an element: `class` and `classList`.
16+
:::warning
17+
`className` was deprecated in Solid 1.4 in favor of `class`.
18+
:::
19+
20+
`classList` toggles element classes from an object of class names and boolean values.
2121

22-
First, `class` can be set like other attributes. For example:
22+
## Syntax
2323

2424
```tsx
25-
// Two static classes
26-
<div class="active editing" />
25+
<div classList={{ active: state.active }} />
26+
```
2727

28-
// One dynamic class, deleting class attribute if it's not needed
29-
<div class={state.active ? 'active' : undefined} />
28+
## Value
3029

31-
// Two dynamic classes
32-
<div class={`${state.active ? 'active' : ''} ${state.currentId === row.id ? 'editing' : ''}`} />
33-
```
30+
- **Type:** `Record<string, boolean | undefined | null>`
3431

35-
:::note
36-
Note that `className` was deprecated in Solid 1.4 in favor of {" "} `class`.
37-
:::
32+
Object whose keys are class names and whose values control whether each class is present.
33+
34+
## Behavior
35+
36+
- Each key is treated as a class name.
37+
- Truthy values add the class and falsy values remove it.
38+
- Updates are applied per class rather than replacing the whole `class` attribute.
39+
- `classList` is a compile-time pseudo-attribute and does not work through prop spreads or `<Dynamic>`.
40+
- If both `class` and `classList` are reactive, updates to `class` can overwrite classes managed by `classList`.
3841

39-
Alternatively, the `classList` pseudo-attribute lets you specify an object, where each key is a class and the value is treated as a boolean representing whether to include that class. For example (matching the last example):
42+
## Examples
43+
44+
### Basic usage
4045

4146
```tsx
4247
<div
@@ -47,23 +52,8 @@ Alternatively, the `classList` pseudo-attribute lets you specify an object, wher
4752
/>
4853
```
4954

50-
This example compiles to a render effect that dynamically calls [element.classList.toggle](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle) to turn each class on or off, only when the corresponding boolean changes. For example, when `state.active` becomes true [false], the element gains [loses] the `active` class.
51-
52-
The value passed into `classList` can be any expression (including a signal getter) that evaluates to an appropriate object. Some examples:
55+
### Dynamic class name
5356

5457
```tsx
55-
// Dynamic class name and value
5658
<div classList={{ [className()]: classOn() }} />
57-
58-
// Signal class list
59-
const [classes, setClasses] = createSignal({})
60-
setClasses((c) => ({ ...c, active: true }))
61-
<div classList={classes()} />
62-
```
63-
64-
While possible, mixing `class` and `classList` in Solid can lead to unexpected behavior.
65-
The safest approach is to use a static string (or nothing) for `class` and keep `classList` reactive.
66-
You can also use a static computed value for class, such as `class={baseClass()}`, however you must make sure it comes before any `classList` pseudo-attributes.
67-
If both `class` and `classList` are reactive, changes to `class` will overwrite the entire `class` attribute, potentially undoing any updates made by `classList`.
68-
69-
Because classList is a compile-time pseudo-attribute, it does not work in a prop spread like `<div {...props} />` or in `<Dynamic>`.
59+
```

‎src/routes/reference/jsx-attributes/innerhtml.mdx‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,48 @@
11
---
22
title: innerHTML
33
use_cases: >-
4-
rendering html strings, dynamic html content, third-party html, legacy content
5-
migration, sanitized markup
4+
rendering HTML strings, replacing element children with parsed markup
65
tags:
76
- html
87
- dom
98
- security
10-
- content
119
- markup
1210
version: "1.0"
1311
description: >-
14-
Set raw HTML content in SolidJS elements using innerHTML attribute and render
15-
HTML strings dynamically.
12+
Set an element's `innerHTML` property from JSX.
1613
---
1714

18-
The `innerHTML` attribute is equivalent to the [`innerHTML` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML).
19-
This attribute replaces all existing nodes of the element with new nodes generated by parsing the provided string as HTML.
15+
`innerHTML` sets an element's `innerHTML` property.
2016

21-
:::caution
17+
## Syntax
2218

23-
Using `innerHTML` with unsanitized user-supplied data can introduce security vulnerabilities.
19+
```tsx
20+
<div innerHTML={html} />
21+
```
22+
23+
## Value
24+
25+
- **Type:** `string`
26+
27+
HTML string parsed into the element.
28+
29+
## Behavior
30+
31+
- Setting `innerHTML` replaces the element's existing children with nodes parsed from the string.
32+
- The value is written through the DOM `innerHTML` property.
2433

34+
:::caution
35+
Using `innerHTML` with unsanitized user-supplied data can introduce security vulnerabilities.
2536
:::
37+
38+
## Examples
39+
40+
### Basic usage
41+
42+
```tsx
43+
<div innerHTML={markup} />
44+
```
45+
46+
## Related
47+
48+
- [`textContent`](/reference/jsx-attributes/textcontent)

‎src/routes/reference/jsx-attributes/style.mdx‎

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,61 @@
22
title: style
33
order: 7
44
use_cases: >-
5-
inline styling, dynamic styles, css variables, responsive design, theme
6-
customization, animated styles
5+
inline styles, dynamic style values, CSS variables
76
tags:
87
- styling
98
- css
109
- inline
1110
- variables
12-
- dynamic
13-
- properties
1411
version: "1.0"
1512
description: >-
16-
Apply dynamic inline styles in SolidJS with string or object syntax. Set CSS
17-
properties and variables reactively for responsive component styling.
13+
Set inline styles with a CSS string or an object of property names and values.
1814
---
1915

20-
Solid's style attribute lets you provide either a CSS string or an object where keys are CSS property names:
16+
`style` sets inline styles from either a CSS string or an object.
17+
18+
## Syntax
2119

2220
```tsx
23-
// string
24-
<div style={`color: green; height: ${state.height}px`} />
21+
<div style="color: green" />
22+
<div style={{ color: "green" }} />
23+
```
2524

26-
// object
27-
<div style={{
28-
color: "green",
29-
height: state.height + "px" }}
30-
/>
25+
## Value
26+
27+
- **Type:** `string | Record<string, string | undefined | null>`
28+
29+
CSS string or style object.
30+
31+
## Behavior
32+
33+
- String values are written as inline CSS text.
34+
- Object values are applied property by property with `element.style.setProperty`.
35+
- Object keys should use lower-case, dash-separated CSS property names.
36+
- CSS custom properties can be set with keys such as `--my-color`.
37+
38+
## Examples
39+
40+
### CSS string
41+
42+
```tsx
43+
<div style={`color: green; height: ${state.height}px`} />
3144
```
3245

33-
Unlike [React's style attribute](https://reactjs.org/docs/dom-elements.html#style), Solid uses **element.style.setProperty** under the hood. This means you need to use the lower-case, dash-separated version of property names instead of the JavaScript camel-cased version, such as `background-color` rather than `backgroundColor`. This actually leads to better performance and consistency with SSR output.
46+
### Style object
3447

3548
```tsx
36-
// string
37-
<div style={`color: green; background-color: ${state.color}; height: ${state.height}px`} />
38-
39-
// object
40-
<div style={{
41-
color: "green",
42-
"background-color": state.color,
43-
height: state.height + "px" }}
49+
<div
50+
style={{
51+
color: "green",
52+
"background-color": state.color,
53+
height: `${state.height}px`,
54+
}}
4455
/>
4556
```
4657

47-
This also means you can set CSS variables! For example:
58+
### CSS variable
4859

4960
```tsx
50-
// set css variable
5161
<div style={{ "--my-custom-color": state.themeColor }} />
5262
```

‎src/routes/reference/jsx-attributes/textcontent.mdx‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,43 @@
11
---
22
title: textContent
33
use_cases: >-
4-
text-only content, performance optimization, plain text rendering, avoiding
5-
html parsing, simple text updates
4+
text-only content, replacing element children with text
65
tags:
76
- text
8-
- performance
97
- content
10-
- optimization
118
- dom
129
version: "1.0"
1310
description: >-
14-
Optimize text rendering with textContent in SolidJS. Bypass diffing for
15-
text-only content and improve performance for simple text updates.
11+
Set an element's `textContent` property from JSX.
1612
---
1713

18-
The `textContent` attribute is equivalent to the [`textContent` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent).
19-
This attribute replaces all existing child nodes of the element with a single text node containing the provided string.
14+
`textContent` sets an element's `textContent` property.
2015

21-
Using `textContent` can improve performance when the element's children are known to be exclusively text, as it bypasses the generic diffing process.
16+
## Syntax
17+
18+
```tsx
19+
<div textContent={value} />
20+
```
21+
22+
## Value
23+
24+
- **Type:** `string | number`
25+
26+
Text written to the element.
27+
28+
## Behavior
29+
30+
- Setting `textContent` replaces the element's existing children with a single text node.
31+
- The value is written through the DOM `textContent` property.
32+
33+
## Examples
34+
35+
### Basic usage
36+
37+
```tsx
38+
<div textContent={count()} />
39+
```
40+
41+
## Related
42+
43+
- [`innerHTML`](/reference/jsx-attributes/innerhtml)

0 commit comments

Comments
 (0)