JSX attributes
JSX attributes in the Migrating from Solid and SolidStart guide.
| Solid | ShadowJS | What differs |
|---|---|---|
class="a", classList={{ on: x() }}, class:on={x()} |
same | class also takes arrays and objects (clsx style): class={["a", { b: on() }]}. |
style={{ color: c() }}, style:color={c()} |
same | Object keys are camelCase or --custom; dash-case keys such as "background-color" are a type error. |
onClick={fn} |
same | Delegated to document. The handler expression is evaluated once; it is not re-bound when it would change. Like Solid, mouseover, mouseout, pointerover and pointerout are delegated too (23 events in all); mouseenter and mouseleave do not bubble, so they are bound on the element. |
onClick={[fn, data]} |
same | Called as fn(data, event). |
onChange, onFocus, onBlur (camelCase) |
React's meaning | onChange on a text input or textarea runs on every edit; onFocus and onBlur bubble (focusin, focusout). Solid's are the native change, focus and blur: spell them onchange, onfocus, onblur in a ported Solid app. The lower-case spelling is always native. |
on:name={fn}, oncapture:name={fn} |
same | Native listeners, bound once. A function, [fn, data] or a { handleEvent } object. on:name inside a {...spread} does nothing: use onName there. |
ref={el}, ref={(el) => ...}, ref={props.ref} |
same | Same. |
use:dir={arg} |
same | The directive gets (element, accessor); reads of accessor() are tracked. |
prop:value, attr:data-x, bool:disabled |
same | Same. |
innerHTML={html}, textContent={text} |
same | Write the value as an expression (innerHTML={html}). A string literal (innerHTML="<b>x</b>") is written as the property too. |
/* @once */ |
/*@once*/ or /*@static*/ |
Both mark the expression after them to be read once. |
{...props} on elements and components |
same | Identifier and member spreads ({...props.attrs}) both work. |
<svg:rect> namespaced tags |
none | Refused by the compiler (NAMESPACED_TAG). Plain <svg><rect /></svg> works. |