@voks/voks-web-elements

Voks Web Elements is a list of atomic voks components, reflecting every standard HTML Element tag as described at the MDN. It does not include deprecated (and yet) no experimental tags.

https://github.com/voks-templating/voks-web-elements/releases

https://deno.land/x/voks_web_elements/mod.ts

All elements provide an attributes parameter, that is typed to include all global HTML attributes as well as the specific attributes for each element. Also data-* attributes (in the form of dataXyz: true or "data-xyz": true) and aria-* attributes (also in kebap and camel case) are supported.

If a dom element is allowed to have content the attributes run as first parameter, whereas the content can be passed as second parameter.

If no attributes are present the attributes param can be skipped and the content can be passed instead.

Many HTML Elements allow to have child elements as content. Content is usually the second argument of a Web Element, but can also be passed as first argument when no attributes are passed.

You can compose child content by passing an voks html string template or by passing an array with a list of child elements.

import { html, renderToString } from "https://deno.land/x/voks/mod.ts";
import { div, p, span } from "https://deno.land/x/voks_web_elements";

// use with html`` tagged templates to be more flexible
div(
  { class: "container" },
  html`
    <p><!-- useful in combination with otherwise static html snippets --></p>
    ${p("hello, ")}
    ${span({ class: "highlight" }, "world!")}
    <p><!-- useful in combination with otherwise static html snippets --></p>
  `,
);

// use with [] to maintain a cleaner structure
div({ class: "container" }, [
  p("hello,"),
  span({ class: "highlight" }, "world!"),
]);

import { html, renderToString } from "https://deno.land/x/voks/mod.ts";
import {
  body,
  h1,
  head,
  htmlElement,
} from "https://deno.land/x/voks_web_elements";

// deno-fmt-ignore
const template = htmlElement(html`
  ${head()}
  ${body(html`
    ${h1({ class: "title" }, "Hello World!")}
  `)}
`)

await renderToString(template);

npm i @voks/voks
npm i @voks/voks-web-elements

import { html, renderToString } from "@voks/voks";
import { body, h1, head, htmlElement } from "@voks/voks-web-elements";

// deno-fmt-ignore
const template = htmlElement(html`
  ${head()}
  ${body(html`
    ${h1({ class: "title" }, "Hello World!")}
  `)}
`)

await renderToString(template);

deno test

Apache-2.0