Skooma.js is a library for generating DOM nodes within JavaScript.
Skooma is only a small ES6 module that uses meta-programming to
turn JavaScript into a DSL
that generates HTML and XML subtrees.
This means you're writing plain JavaScript code that needs no additional
transpilation steps and runs directly in the browser.
Here's a few examples of how things are done in Skooma.js and how it compares to vanilla JavaScript.
Generating a single empty HTML element. The html
namespace creates generator functions dynamically.
Using the browser API, this is a bit more verbose, but still looks similar.
String arguments to the generator function will be inserted as text nodes.
Without Skooma.js this would already require using a variable since createElement
cannot insert text content into a new node.
DOM Nodes can also be passed into the generator function to add them as child-elements.
This would normally require two separate variables, one for each element.
When passing an object, its key/value pairs will be added as attributes to the new element.
Once again, in plain JS this requires a variable.
When an object value is a function, it will instead be added as an event handler. The corresponding key will be used as the event name.
You guessed it: variable.
Adding a shadow-root to the new element can be done witht he shadowRoot
property.