GZA
Declarative custom HTML elements
const gza = gza`<my-element > </my-element>`
<!-- Example w/ defaults --> <!-- Renders --> pass <!-- Example w/ property --> <!-- Renders --> test-prop
See also markdown-element
which is implemented with gza
Features
Initialization Functions
Any function defined before your element definition is an initialization function. It takes a single argument, an instance of the new element.
Only after all intialization functions have finished, including async functions, will the render function be called.
Initialization functions are only ever called once per element instance.
gza`<my-image > <img src=""></img></my-image>`
Templatized Rendering
All content and functions defined inside your element definition are used for templatized rendering.
The content and function results are used to display content in the
<render>
element.
Every time an element attribute or element property changes that was previously defined by the defaults, the entire element template will be run again in order to re-render.
Every time the contents of the element changes it will also call the template functions in order to re-render.
gza`<my-element > <h1></h1> <h2></h2> <h3></h3></my-element>`
<!-- Example w/ defaults --><!-- Renders --> 1 2 3 <!-- Property/Attribute changes will re-render --><!-- Re-Renders As --> one two three
ShadowDOM
Any content defined below your element definition will be attached
to the shadowDOM. If you do not create a slot
for "render"
then the
rendered content will have nowhere to display.
You can also include template functions to dynamically change the shadowDOM content and styling when properties and values change.
const nowhitespace = str gza`<my-element> </my-element><style>h3 { font-size: 200%;}</style><h3></h3><slot name="render"></slot>`
<!-- Example w/ defaults -->This is a test.<!-- Renders --> Thisisatest. <!-- This will display at 200% font size. --> Thisisatest.
Kitchen Sink
Here's an example of every feature currently implemented.
const gza = gza`<test-kitchen > <!-- Default settings --> <div id="constructors"></div> <!-- Templating --> <div id="propdefault"></div> <!-- Supports async --> <div id="inner"></div></test-kitchen><style>::slotted(render) { font-size: ; <!-- ShadowDOM Templating -->}</style><h3>Test</h3><slot name="render"></slot>`
<!-- Example w/ defaults -->TestContent <!-- Renders --> Test 2 test TestContent <!-- Example w/ property -->TestContent <!-- Renders the same as before but with font-size increased to 200%-->
Why is it called GZA?
Cause GZA the genius!