RZA
Create simple HTML elements
const RZA = { // default render settings return wrap: false } async { if settingswrap return `<span></span>` else return innerHTML } windowcustomElements
<!-- Example w/ defaults -->Test <!-- Renders --> Test <!-- Example w/ property set --> Test <!-- Renders --> Test <!-- Setting properties dynamically cause re-rendering --> <!-- Triggers a Render, batched into a single render() call. --> New Test
See also: markdown-element.
render() function.
The render function you define will be called whenever relevant state (settings) are altered.
Returning a string will reset the innerHTML of the <render>
element.
Returning the previous element value is a noop
, RZA assumes that because
you are returning the prior element you have manipulated it correctly.
Returning an HTML Element will append that element as a child and put
it in the render
slot of the shadowDOM so that it can be seen.
default types.
Setting an array for defaults defines those property names as settings but with no real defaults.
This means that element attributes and properties of these names will be treated as settings, and alterations to them will cause re-renders.
{ return 'propname' }
Functions (sync and async) can be used as dynamic initializers for default properties.
{ return prop: async 'example' }