Special properties

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:

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")
);

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:

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.

Constructor with DOM

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>
}

Dynamic constructor

Atomico associates the variable associated with the instance as a constructor, example:

function component({ subComponent }){
    const TagName = `my-${subComponent}`;
    
    return <host>
        <TagName/>
    </host>
}

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:

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

cloneNode

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.

SSR hydration

Atomico allows reusing existing DOM in the document. This is done during the webcomponent instatiation, by setting a special property in the tag to mark it for hydration.

<my-webcomponent data-hydrate>
    <h1>I will be the title of the component</h1>
</my-webcomponent>

This can be done for shadowDom too:

<my-webcomponent data-hydrate>
    <template shadowroot="open">
        <h2>Shadow Content</h2>
        <slot></slot>
        <style>shadow styles</style>
    </template>
    <h2>Light content</h2>
</my-webcomponent>

Class name inheritance

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.

Syntax

JSX

Atomico supports jsx-runtime, alternatively you can import the h function to declare manual of the JSX pragma, eg:

Template String

Return rule

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:

Simple lists

Lists with keys

the key property can receive values of the type of any type that allows generating a reference to the node, eg:

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:

shadowDom property

This property allows you to declare the use of the shadowDom, eg:

Method association

You can declare a method by declaring a function in the host tag without using the prefix on in its name, eg:

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: