@atomico/uhtml
v1.0.0
Published
uhtml render for Atomico webcomponents
Downloads
2
Readme
@atomico/uhtml
@atomico/uhtml
will allow you to use uhtml within Atomico, example:
import { c } from "atomico";
import { html } from "@atomico/uhtml";
function component() {
return html`<h1>Atomico + uhtml</h1>`;
}
The first html return must always come from the @atomico/uhtml
model, since atomico adds the render method to this function, which allows atomico to render any library.
Objectives.
- Support uhtml as an optional renderer for developers who are comfortable with uhtml.
- Give declarative support to the use of the shadowDom.
- Support references, to share hooks between Atomico, uhtml, react and react.
shadowDom
import { c } from "atomico";
import { html } from "@atomico/uhtml";
function component({ message }: Props<typeof component>) {
html.shadowDom = true;
return html`<h1>Welcome to ${message}!</h1>`;
}
component.props = {
message: { type: String, value: "Atomico" },
};
customElements.define("my-component", c(component));
useRender
Homologous hook of useRender from @atomico/hooks/use-render.
import { useRender } from "@atomico/uhtml";
function component() {
useRender(() => html`<input type="text" />`);
}