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.
Api - Previous
Props(Properties)
Advanced
Last modified 6mo ago
Copy link
Contents