Advanced

Search…
Advanced
Special properties
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
lt;name>
any
the $ prefix allows defining as an attribute in all cases.
render
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)
1
import { h, render } from "atomico";
2
​
3
​
4
render(
5
    h("host",{ style: {background:"red"} }
6
        h("h1",null,"Text content...")
7
    ),
8
    document.querySelector("#app")
9
);
Copied!
1
import { h, render } from "atomico";
2
​
3
​
4
render(
5
    <host style={{background:"red"}}>
6
        <h1>Text content...</h1>
7
    </host>,
8
    document.querySelector("#app")
9
);
Copied!
1
import { html, render } from "atomico";
2
​
3
​
4
render(
5
    html`<host style=${background:"red"}>
6
        <h1>Text content...</h1>
7
    </host>`,
8
    document.querySelector("#app")
9
);
Copied!
Render rule "The first node of the render must always be the host tag".
Constructor with custom element
This technique allows you to use any registered custom element without the need to know its tag-name for its use, example:
1
function component(){
2
    return <host/>
3
}
4
// 1️⃣ We create the custom element
5
const Component = c(component);
6
​
7
// 2️⃣ We register the custom element
8
customElements.define("my-component", Component);
9
​
10
function App(){
11
    return <host>
12
        <Component/>
13
    </host>
14
}
Copied!
Advantage :
1.Remove leverage from tag-name
2.Infer the types of the props and autocomplete only if you use JSX and Atomico.
Constructor with DOM
Atomico allows the use of the DOM, for this it establishes its created or recovered node as a constructor, example:
1
function component(){
2
​
3
    const Div = useMemo(()=>document.createElement("div"));
4
    
5
    return <host>
6
        <Div style="color: black">content...</Div>
7
    </host>
8
}
Copied!
Dynamic constructor
Atomico associates the variable associated with the instance as a constructor, example:
1
function component({ subComponent }){
2
    const TagName = `my-${subComponent}`;
3
    
4
    return <host>
5
        <TagName/>
6
    </host>
7
}
Copied!
staticNode
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:
1
function component() {
2
  return (
3
    <host>
4
      <h1 staticNode onclick={console.log}>
5
        i am static node!
6
      </h1>
7
    </host>
8
  );
9
}
Copied!
the biggest advantage of this is that the node accesses the scope of the webcomponent
cloneNode
Allows to clone a node from the virtualDOM, example:
1
const Div = document.createElement("div");
2
​
3
Div.innerHTML = `<h1>Div!</h1>`;
4
​
5
function component() {
6
  return (
7
    <host>
8
      <Div cloneNode onclick={console.log} />
9
      <Div cloneNode onclick={console.log} />
10
      <Div cloneNode onclick={console.log} />
11
      <Div cloneNode onclick={console.log} />
12
      <Div cloneNode onclick={console.log} />
13
    </host>
14
  );
15
}
Copied!
The objective of this feature is to retrieve slot and use it as a template from the webcomponent.
Hidratación desde SSR
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
1
<my-webcomponent data-hydrate>
2
    <h1>I will be the title of the component</h1>
3
</my-webcomponent>
Copied!
El shadowDOM también puede ser hidratado ejemplo:
1
<my-webcomponent data-hydrate>
2
    <template shadowroot="open">
3
        <h2>Shadow Content</h2>
4
        <slot></slot>
5
        <style>shadow styles</style>
6
    </template>
7
    <h2>Light content</h2>
8
</my-webcomponent>
Copied!
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.
Api - Previous
VirtualDOM
Next - Api
Hooks
Last modified 3mo ago
Copy link
Edit on GitHub
Contents
Special properties
render
Constructor with custom element
Hidratación desde SSR