Advanced
Property | Type | Effect |
|---|---|---|
shadowDom | Boolean | Enables the use of the shadowDOM on the node. |
staticNode | Boolean | Render the node only once, this optimizes the update process as the node is ignored between updates. |
cloneNode | Boolean | clone a node of type Element |
$<name> | any | the $ prefix allows defining as an attribute in all cases. |
By default, the render is configured to be used within the webcomponent by reading the return of the function, but it can be used outside of Atomico, example:
function h
JSX
Template string(html)
import { h, render } from "atomico";
render(
h("host",{ style: {background:"red"} }
h("h1",null,"Text content...")
),
document.querySelector("#app")
);
import { h, render } from "atomico";
render(
<host style={{background:"red"}}>
<h1>Text content...</h1>
</host>,
document.querySelector("#app")
);
import { html, render } from "atomico";
render(
html`<host style=${background:"red"}>
<h1>Text content...</h1>
</host>`,
document.querySelector("#app")
);
Render rule "The first node of the render must always be the host tag".
This technique allows you to use any registered custom element without the need to know its
tag-name for its use, example:function component(){
return <host/>
}
// 1️⃣ We create the custom element
const Component = c(component);
// 2️⃣ We register the custom element
customElements.define("my-component", Component);
function App(){
return <host>
<Component/>
</host>
}
Advantage :
- 1.Remove leverage from tag-name
- 2.Infer the types of the props and autocomplete only if you use JSX and Atomico.
Atomico allows the use of the DOM, for this it establishes its created or recovered node as a constructor, example:
function component(){
const Div = useMemo(()=>document.createElement("div"));
return <host>
<Div style="color: black">content...</Div>
</host>
}
Atomico associates the variable associated with the instance as a constructor, example:
function component({ subComponent }){
const TagName = `my-${subComponent}`;
return <host>
<TagName/>
</host>
}
allows to declare a node within the scope of the function as static, this will optimize the diff process between render, achieving better performance in cases of high stress of the UI, example:
function component() {
return (
<host>
<h1 staticNode onclick={console.log}>
i am static node!
</h1>
</host>
);
}
the biggest advantage of this is that the node accesses the scope of the webcomponent
Allows to clone a node from the virtualDOM, example:
const Div = document.createElement("div");
Div.innerHTML = `<h1>Div!</h1>`;
function component() {
return (
<host>
<Div cloneNode onclick={console.log} />
<Div cloneNode onclick={console.log} />
<Div cloneNode onclick={console.log} />
<Div cloneNode onclick={console.log} />
<Div cloneNode onclick={console.log} />
</host>
);
}
The objective of this feature is to retrieve slot and use it as a template from the webcomponent.
Atomico permite la reutilización del DOM ya existente en el documento, esto se realiza al momento de la instancia del webcomponent definiendo una propiedad especial sobre la etiqueta a hidratar
<my-webcomponent data-hydrate>
<h1>I will be the title of the component</h1>
</my-webcomponent>
El shadowDOM también puede ser hidratado ejemplo:
<my-webcomponent data-hydrate>
<template shadowroot="open">
<h2>Shadow Content</h2>
<slot></slot>
<style>shadow styles</style>
</template>
<h2>Light content</h2>
</my-webcomponent>
El código expuesto aun no es parte del estándar, es una propuesta impulsada por el Google Chrome https://web.dev/declarative-shadow-dom/, para ser usada en todos los browser debe hacer uso de polyfills.
Atomic creates a customElement from a function, Atomico will take the name of the function and associate it as the name of the CustomElement in CamelCase format, example:
function button(){
return <host/>
}
const Button = c(button);
This results in the class name being equal to Button. This feature is useful for tools like Storybook, when serializing the JSX.
Last modified 3d ago