// 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:
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
<spankey={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
<hostref={ref}></host>;// The reference will be the instance
4
// of the custom Element
5
6
<inputref={ref}/>;// The reference will be the input
Copied!
The references must be immutable objects, to create it there is the useRefhook 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
<hostshadowDom></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
<divshadowDom></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:
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 =newMyElement();
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.