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.

Release History

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

API

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

Attributes

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.

NOTE!: please be aware, that attributes are no longer passed via attributes sub-property. Instead, they are passed directly to the element function.

Usage

Deno

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("Hello World!", { class: "title" })}
  `)}
`)

await renderToString(template);

npm

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("Hello World!", { class: "title" })}
  `)}
`)

await renderToString(template);

Development

Testing

deno test

License

Apache-2.0