attributes / properties
Describes behavior with attributes and properties.
# Attributes vs Properties
setProperty will be used when any of the following is true:
- tagName has a dash (as custom-elements do) and propName is a setter
- the value is different than string and element has a propName setter
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 |
# 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.
# Children
children as an attribute will be used as long as the node on where it's defined doesn't have any childNodes.
# 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