attributes / properties
Describes behavior with attributes and properties.
# Attributes vs Properties
setProperty will be used when any of the following is true:
- the element has a dash on the tagName, as custom elements do
- value is object, null or undefined
- value is boolean and name doesnt contain hyphens
setAttribute will be also used when any of the following is true:
- value is not an object, null or undefined
While this does not work for every situation, it's a sensible default that works in most cases. To change this behavior see the next section
# Namespace To Force Props Type
A namespace can be used to force the prop kind
| Name | Kind | Description |
|---|---|---|
| attr:name | setAttribute | will always add it as an attribute |
| prop:name | setProperty | will always set it as a property |
| bool:name | setBool | adds/remove based on truthy/falsy |
# lit-style attributes/properties
html may use lit-style attributes/properties
| Name | Kind | Description |
|---|---|---|
| .someProp="true" | setProperty | will always set it as a property |
| ?bool="value" | setBool | adds/remove based on truthy/falsy |
| @click="{handleEvent(e){...}, once:true}" | EventListener | adds/remove based on truthy/falsy |
See Also: attr:__, prop:__, bool:__ and setAttribute, setProperty, setBool
# Deleting
On a property, deleting means setting the value to null when the new value is null or undefined.
On an attribute, deleting means removing the attribute when the new value is null or undefined.
# Locked To Properties
value, textContent, innerText, innerHTML are locked to always use setProperty
# Children
children as an attribute will be used as long as the node on where it's defined doesn't have any childNodes. Note: children cannot be overridden via a propsPlugin. Everything else can be changed.
# xmlns
The xmlns attribute is copied to children. Which means it supports by default most kinds if not all xmls: SVG, MathML, with its fancy namespaces.
# Events
Events using the on__ form are case insensitive
Events using the on:__ form are case sensitive
# Props With Default Behavior
| Name | Description |
|---|---|
| ref | callback to get a reference to the element |
| onMount | onMount adds a callback to the mount event |
| onUnmount | onUnmount adds a callback to the unmount event |
| class | sets classes in the element in various ways |
| style | sets styles in the element in various ways |
| var | sets a css var in the element |
| css | <span css="class{color:green} class:hover{color:red}"/> becomes <span class="class-styles-applied"/> |
# SVG
test: SVG + xlink
# Showing XML Test
Testing if keeps the parent xmlns using a toggling Show