Create web components without using a class with Atomico

WebComponents with Atomico

Atomico was born to simplify the development of webcomponents by applying a functional approach and completely eliminating the visibility of this! Yes goodbye classes. Show me 👇

💪 A very powerful syntax

// IMPORT
import { c, html, css } from "atomico";

// WEBCOMPONENT
function component({ message }) {
  return html`<host shadowDom>${message}</host>`;
}

// WEBCOMPONENT PROPERTIES AND ATTRIBUTES
component.props = {
  message: String,
};

// WEBCOMPONENT APPEARANCE
component.styles = css`
  :host {
    font-size: 30px;
  }
`;

// DEFINITION OF THE WEBCOMPONENT AS A TAG
customElements.define("my-component", c(component));

Let's analyze the code in parts ...

Import

import { c, html, css } from "atomico";

What have we imported?

1. c: Function that transforms the functional component into a standard customElement.
2. html: Function to declare the template of our component, you can also use JSX.
3. css: Function that allows creating the CSSStyleSheet (CSS) for our component as long as it declares the shadowDom.

Webcomponent

function component({ message }) {
  return html`<host shadowDom>${message}</host>`;
}

Our component function receives all the props (Properties and Attributes) declared in component.props, the component function declares all the logic and template of the webcomponent. An important rule within Atomico is "every component created with Atomico must always return the tag".

Reactive properties and attributes of the webcomponent

Atomico detects the prop (Properties and Attributes) of the component thanks to the association of the props object, this through the use of index and value allows you to define:

1. index: Name of the property and attribute.
2. value: type of the prop.

component.props = {
  message: String,
};

From the example we can infer that Atomico will create in our webcomponent a property and attribute called message and this can only receive values of the String type.

Appearance of the webcomponent.

Atomico detects the static styles of your component thanks to the association of the styles property:

component.styles = css`
  :host {
    font-size: 30px;
  }
`;

styles accepts individual or list CSSStyleSheet (CSS) values, the return from the css function is a standard CSSStyleSheet, so it can be shared outside of Atomico.

Definition of your webcomponent

customElements.define("my-component", c(component));

To create our standard customElement we will have to deliver our functional component to the c function of the Atomico module, the c function will generate as a return a customElement that can be defined or extended.

Example

Comments

[Hoang Nguyen]

Hi Matias,
Thanks for your sharing of Atomico.
I love it as following latest React concepts.
I had started on using Atomico creating some web component as examples.

From the other side, I wonder how to wrap an existing React component as Atomico web component?
I think it could be in Atomico's useEffect we call ReactDOM.render (and unmountComponentAtNode when returning), but not sure how exactly to make it.
Would you please help with some simple working example?
Thanks Matias!