update

devour_data/docs/classlist.json

@@ -0,0 +1,17 @@
+{
+  "id": "188e1c80ccd45df452ba3d65",
+  "source": "solid:signals",
+  "type": "github-document",
+  "title": "classlist",
+  "content": "---\ntitle: classList\norder: 1\nuse_cases: \u003e-\n  styling components, dynamic classes, conditional styles, toggling classes,\n  reactive styling\ntags:\n  - styling\n  - css\n  - classes\n  - reactive\n  - conditional\n  - dom\nversion: '1.0'\ndescription: \u003e-\n  Manage element classes dynamically in SolidJS with class and classList\n  attributes. Toggle multiple classes reactively based on application state.\n---\n\nSolid offers two attributes to set the class of an element: `class` and `classList`.\n\nFirst, `class` can be set like other attributes. For example:\n\n```tsx\n// Two static classes\n\u003cdiv class=\"active editing\" /\u003e\n\n// One dynamic class, deleting class attribute if it's not needed\n\u003cdiv class={state.active ? 'active' : undefined} /\u003e\n\n// Two dynamic classes\n\u003cdiv class={`${state.active ? 'active' : ''} ${state.currentId === row.id ? 'editing' : ''}`} /\u003e\n```\n\n:::note\n\tNote that \u003ccode\u003eclassName\u003c/code\u003e was deprecated in Solid 1.4 in favor of {\" \"}\n\t\u003ccode\u003eclass\u003c/code\u003e.\n:::\n\nAlternatively, 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):\n\n```tsx\n\u003cdiv\n\tclassList={{\n\t\tactive: state.active,\n\t\tediting: state.currentId === row.id,\n\t}}\n/\u003e\n```\n\nThis 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.\n\nThe value passed into `classList` can be any expression (including a signal getter) that evaluates to an appropriate object. Some examples:\n\n```tsx\n// Dynamic class name and value\n\u003cdiv classList={{ [className()]: classOn() }} /\u003e\n\n// Signal class list\nconst [classes, setClasses] = createSignal({})\nsetClasses((c) =\u003e ({ ...c, active: true }))\n\u003cdiv classList={classes()} /\u003e\n```\n\nWhile possible, mixing `class` and `classList` in Solid can lead to unexpected behavior.\nThe safest approach is to use a static string (or nothing) for `class` and keep `classList` reactive.\nYou 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.\nIf both `class` and `classList` are reactive, changes to `class` will overwrite the entire `class` attribute, potentially undoing any updates made by `classList`.\n\nBecause classList is a compile-time pseudo-attribute, it does not work in a prop spread like `\u003cdiv {...props} /\u003e` or in `\u003cDynamic\u003e`.",
+  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/classlist.mdx",
+  "metadata": {
+    "path": "src/routes/reference/jsx-attributes/classlist.mdx",
+    "repo": "solidjs/solid-docs",
+    "repo_url": "https://github.com/solidjs/solid-docs.git",
+    "size": 2660,
+    "source_type": "github"
+  },
+  "hash": "f2623b36c9542e1252a1228a7808b13111f3b31e51a0768da773a47e29038f94",
+  "timestamp": "2026-02-23T11:43:00.189364719+01:00"
+}