Skip to content

ListConverter

ts
const ListConverter: ConverterFactory<ReturnType<StringConstructor | NumberConstructor>[], [string?, (StringConstructor | NumberConstructor)?]>;

The ListConverter allows you to define lists of primitive values, such as strings or numbers, as attributes. This is useful for attributes that expect a list of values, like the official class attribute, rel, srcset, or accept.

Param

The string used to separate the list items in the attribute value. Defaults to a comma (,).

Param

The type of the items as primitive string or number constructor. Defaults to String,

Example

typescript
@customElement('my-component')
class MyComponent extends LitElement {
  @property({
    type: Array,
    reflect: true,
    attribute: 'units',
    converter: ListConverter(' ', String),
  })
  units = ['px', 'em', 'rem'];
}
html
<my-component units="px em rem"></my-component>