Properties
In Corset, properties are used to bind to aspects of an element, such as its attributes, text, and events.
Corset includes both properties and shorthand properties, properties that combine multiple properties together.
Corset also contains multi-binding properties; properties such as event and attr can be used to bind to multiple things.
Element properties
These properties bind to the major parts of an element.
- text
- Set the text content of an element.
- class-toggle
- Toggle classes on an element.
- attr
- Attribute shorthand for attr-value and attr-toggle.
- attr-value
- Longhand for setting the value of an attribute on an element.
- attr-toggle
- Toggle boolean attributes on an element.
- event
- Add event listeners on an element.
- event-listener
- Specifiers the listener for the event.
- event-capture
- Specifies if the listener should be called during the capture phase.
- event-once
- Specifies that the listener should be called only once.
- event-passive
- Specifies that the listener will not call preventDefault().
- event-signal
- Specifies an AbortSignal that will remove the listener when aborted.
- event-target
- Specifies the target of the event (if not the selected element).
- prop
- Set properties on the DOM element.
- data
- Set dataset values on an element.
Looping properties
These properties are used to define the behavior of an iterable (each).
- each
- Shorthand property to define an each iteration.
- each-items
- Set the items (such an array) to iterate on.
- each-template
- Sets the <template> element to use for each item in the iterable.
- each-key
- Defines a key to use to identify items in the iterable.
Other properties
These properties attach behavior to elements when matched.
- attach-template
- Replace the children of an element with a <template>.
- behavior
- Mount behaviors to an element.
- store-root
- Creates a store where state can be shared.
- store-set
- Sets a (keyed) value in a store.
- custom properties
- Custom properties, like in CSS, use a
--dashedsyntax.