# 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                                                                         |
| $\<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:

{% tabs %}
{% tab title="function h" %}

```javascript
import { h, render } from "atomico";


render(
    h("host",{ style: {background:"red"} }
        h("h1",null,"Text content...")
    ),
    document.querySelector("#app")
);
```

{% endtab %}

{% tab title="JSX" %}

```jsx
import { h, render } from "atomico";


render(
    <host style={{background:"red"}}>
        <h1>Text content...</h1>
    </host>,
    document.querySelector("#app")
);
```

{% endtab %}

{% tab title="Template string(html)" %}

```javascript
import { html, render } from "atomico";


render(
    html`<host style=${background:"red"}>
        <h1>Text content...</h1>
    </host>`,
    document.querySelector("#app")
);
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Render rule "The first node of the render must always be the host tag".
{% endhint %}

### 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:

```jsx
// 1️⃣ We create the custom element
const Component = c(()=><host/>);

// 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:

```jsx
const MyComponent = c(()=>{
    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:

```jsx
const MyComponent = c(()=>{
    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:

```jsx
const MyComponent = c(() => (
  <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:

```jsx
const Div = document.createElement("div");

Div.innerHTML = `<h1>Div!</h1>`;

const MyComponent = c(() => (
  <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&#x20;

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.

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

This can be done for shadowDom too:

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

{% hint style="info" %}
These code samples are not part of the standard yet, so polyfills must be used to ensure that it works in all browsers. Read more about **Google Chrome**'s proposal here <https://web.dev/declarative-shadow-dom/>.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atomico.gitbook.io/doc/api/virtualdom/advanced.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.