VirtualDOM

Search…
🧩
VirtualDOM
Atomico's virtualDOM is designed to enhance the use of webcomponents.
Syntax
JSX
1
import { c } from "atomico";
2
​
3
function component() {
4
  const handlerClick = () => console.log("click!");
5
  return (
6
    <host shadowDom onclick={handlerClick}>
7
      <h1>content</h1>
8
      <slot></slot>
9
    </host>
10
  );
11
}
12
​
13
customElements.define("my-component", c(component));
Copied!
Atomico supports jsx-runtime, alternatively you can import the h function to declare manual of the JSX pragma, eg:
1
/**@jsx h*/
2
import { h } from "atomico";
Copied!
Template String
Atomico supports the use of template-string thanks to the use of the package htm.
1
import { c } from "atomico";
2
import html from "atomico/html";
3
​
4
function component() {
5
  const handlerClick = () => console.log("click!");
6
  return html`<host shadowDom onclick=${handlerClick}>
7
    <h1>content</h1>
8
    <slot></slot>
9
  </host>`;
10
}
11
​
12
customElements.define("my-component", c(component));
Copied!
Return rule
1
function component() {
2
  // The webcomponent should always return the host tag
3
  return <host></host>;
4
}
Copied!
An important rule of Atomico's virtualDOM is that every webcomponent must return the <host/> tag since it represents the state of the webcomponent's DOM, such as:
1.Enable the use of the shadowDOM by declaring the shadowDom property.
2.Association of events, attributes or properties.
3.Template of the webcomponent.
Template
Event Association
Atomico considers that a property must be associated as an event if it is of the function type and begins with the prefix 'on', eg:
1
<host onclick={() => console.log("click!")}></host>;
2
<host onMyEvent={() => console.log("MyEvent!")}></host>;
3
<input oninput={() => console.log("click!")} />;
4
<slot onslotchange={() => console.log("update slot!")} />;
Copied!
Simple lists
1
<host>
2
  {[1, 2, 3].map((value) => (
3
    <span>{value}</span>
4
  ))}
5
</host>
Copied!
Lists with keys
1
<host>
2
  {[1, 2, 3].map((value) => (
3
    <span key={value}>{value}</span>
4
  ))}
5
</host>
Copied!
the key property can receive values of the type of any type that allows generating a reference to the node, eg:
1
<host>
2
  {listaInmutable.map((objeto) => (
3
    <span key={objeto}>{objeto.value}</span>
4
  ))}
5
</host>
Copied!
Node references
A technique inherited from React, it allows obtaining the reference of the node to which the Ref object is associated through the ref property, example:
1
const ref = useRef();
2
​
3
<host ref={ref}></host>; // The reference will be the instance 
4
                         // of the custom Element
5
​
6
<input ref={ref}/>; // The reference will be the input
Copied!
The references must be immutable objects, to create it there is the useRef hook that creates a reference for each instance of the webcomponent.
shadowDom property
This property allows you to declare the use of the shadowDom, eg:
1
<host shadowDom></host>;
2
// The use of shadow Dom is not exclusive to the host tag
3
// can be used for any node that supports it
4
<div shadowDom></div>;
Copied!
Method association
You can declare a method by declaring a function in the host tag without using the prefix on in its name, eg:
1
// Template
2
<host myMethod={() => console.log("method!")}></host>;
3
// Use from the DOM
4
document.querySelector("my-component").myMethod();
Copied!
If when creating or updating the DOM it does not detect the use of the property, it will be associated as a method of this, thus allowing it to be accessed from the DOM, eg:
1
const myElement = new MyElement();
2
​
3
await myElement.updated;
4
​
5
myElement.myMethod();
Copied!
To access the DOM safely wait for the resolution of the updated property created by the render cycle.
Value cycle as prop
Advanced
Last modified 2mo ago
Copy link
Edit on GitHub
Contents