Advanced
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:
Render rule "The first node of the render must always be the host tag".
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:
Advantage :
Remove leverage from tag-name
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:
Dynamic constructor
Atomico associates the variable associated with the instance as a constructor, example:
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:
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:
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.
This can be done for shadowDom too:
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/.
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:
This results in the class name being equal to Button. This feature is useful for tools like Storybook, when serializing the JSX.
Last updated