Breaking Changes

TODO: Write about breaking changes.

Markup

HTML has always been a first class citizen in Solid. "A div is a div".

const div = <div />; // HTMLDivElement

However, there were a few markup gotchas that this release addresses.

Solid 2.0 aligns better with web standards, making it easier to understand and explain. The main idea is that referencing MDN should suffice, and no Solid-specific rules are introduced.

Attributes Case

camelCase attributes has been dropped in favor of lowercase attributes.

Solid 1.x

<img crossOrigin="anonymous" />

Solid 2.x

<img crossorigin="anonymous" />

Note: Attributes in XML space, such as SVG are still case-sensitive per specification.

Properties

Elements use attributes and not properties. However, the following few commonly used properties are still provided to ease development: innerHTML, textContent and innerText.

<div textContent="<b>bold tag example</b>" />

As usual, to set a property, or a custom property in an element see prop:.

<my-el prop:someProp={true}></my-el>

Boolean Attributes

A Boolean Attribute is an attribute that is present or not present. Commonly authored as <input readonly/> or <input readonly=""/>. Solid represents Boolean Attribute using boolean.

true: boolean adds an empty attribute:

<input readonly={true} />
<input readonly /> // in JSX a lack of value equals `true: boolean`
<input readonly="" /> // for compatibility with HTML an empty string may be used

false: boolean removes the attribute:

<input readonly={false} />

Note: It has to be boolean. truthy and falsy won't work. bool: namespace can be used in that case.

Enumerated Attributes

An Enumerated Attribute is an attribute that allows a string value from a fixed set of possible string values.

<input type="text"/>
<input type="button"/>

A commonly confusing issue with Enumerated Attributes, is that some accept among its values the strings "true" and "false". These are strings that happen to match the boolean identifiers but aren't boolean per se.

For example, the correct use for ARIA Attributes is a string and not a boolean.

<span aria-hidden="true"/> // ✅ correct use
<span aria-hidden="false"/> // ✅ correct use
<span aria-hidden={true}/> // ❌ incorrect use

Removing Attributes

Any attribute can be removed using undefined or false: boolean.

class and classList

classList attribute has been dropped and its behaviour has been merged into class. Making class behave similarly to clsx.

Example:

<div class={[...props.class, "myclass", { "other-class": signal() }]} />

// type for illustrative purposes only - consult type definitions for reference

type class = string | ClassList

type ClassList =
  | Record<string, boolean>
  | Array<
      string | number | boolean | null | undefined | Record<string, boolean>
    >;

Event Handlers

Lowercase event handlers were supported but not encouraged. This release drops support for lowercase event handlers in favor of the camelCase form.

<div onClick={() => console.log('click')}/> // ✅ correct use
<div onclick={() => console.log('click')}/> // ❌ no longer supported

Having multiple ways of doing the same thing made authoring components difficult, as both forms had to be supported.

Components authors often provide callbacks that resemble event handlers, such onSelectedChange in Kobalte, onInitialFocus in corvu, and onOpenChange in Nitropage. Using camelCase makes it consistent with community use and expectations.

Note: For custom event handlers see on:.