@atomico/web-component

Create web-components expressively with JSX + Atomico

Atomico started as a project focused on classes, but the learning curve of this model is expensive, to simplify this Atomico it is recreated centered on web-functional components that approve the concepts of hooks implemented in React.

I invite you to develop incredible web-components.

Index

1. My first web-component
2. Defining properties
   1. Properties without type
   2. Properties with type
3. type...👷 soon

My first web-component

atomico/web-component takes advantage of the expressiveness of JS for the registration of web-components.

import { h } from "@atomico/core";
import { register } from "@atomico/web-component";

function MyTag(){
    return <host>
        <slot/>
    </host>
}

register(<my-tag>{MyTag}</my-tag>)

Components created with register should always return the <host/> tag with or without children, since <host/>.

Defining properties

Properties without type

By registering the web-component, you can define on the tag observable properties by the web-component.

import { h } from "@atomico/core";
import { register } from "@atomico/web-component";

function MyTag(props){
    return <host>
        age: {props.age}
    </host>
}

// age will be a property observable by the web-component my-tag
register(<my-tag age>{MyTag}</my-tag>)

let myTag = document.createElement("myTag");
    myTag.age = 1000;

Properties with type

By registering the web-component, you can define on the label properties oberbables by the web-component, if the property is defined as a function the web-component will execute such function every time it resivates a change towards that property.

import { h } from "@atomico/core";
import { register } from "@atomico/web-component";

function MyTag(props){
    return <host>
        age: {props.age}
    </host>
}

register(<my-tag age={Number}>{MyTag}</my-tag>)

let myTag = document.createElement("myTag");
    myTag.age = "1000";

In the above example age will be received as a number by the MyTag component. since its type has been forced using the Number function.

Types

...soon

transferToSlots

...son