Building Components

Exalt Components are a small wrapper over native Web Components. This means they work as valid HTML elements and can be used anywhere HTML can be used, including other frameworks. You can use components to build independent and reusable pieces of your application. Components allow you to define your own html tags and hook into the component state and lifecycle.

Component names must have a hypen in the name as required by the custom elements standard. By Default Exalt components make use of the Shadow DOM in order to provide encapsulation. This can easily be disabled using the component options.

Component Options:

• tag: string - Sets the component tag
• shadow: boolean - Tells the component to use the ShadowDOM
• styles: string[] - Set the styles to be used in the component
• connect: Store[] - tells the component to react to changes in the provided stores

Styling Components

You can apply css to your components in a variety of ways including importing a global stylesheet, inline style elements, and inline style attributes. When using the ShadowDOM, we reccomend using the "styles" component option. You can import your stylesheet as a string and pass an array of stylesheets to the component.

Component Lifecycle

In your components, you may want to run specific code at certain times in a components life. Exalt provides a couple lifecycle methods for this purpose.

Lifecycle Methods:

• render() - render the components html
• mount() - called when the component is added to the DOM
• unmount() - called when the component is removed from the DOM
• onUpdate(key, value) - called when a component's state or attributes are updated
• shouldUpdate(key, value) - called when a component is about to be updated

Reactive Properties

Components have access to state an attributes for updating the DOM. When making use of state, users can initialize a reactive property using super.reactive(). This function will take the value and make the property reactive so that whenever the value is changed, the view automatically updates. This example displays the current time and updates the time every second.

Component Attributes

Attributes are passed into a component like any other html element. When an attribute changes, the component is automatically updated. Attributes can be accessed using the this.props property. THe attributes are also passed into the render() method for easy destructuring.

The component can then be used as

DOM Manipulation

Sometimes you may need to access a DOM element from the template. Because Exalt renders directly to the real dom, you can simply use normal dom manipulation methods. Alternatively Exalt offers a ref api to help clean up your DOM manipulation code.



Simply use the component's createRef() method and give an element the corresponding ref attribute name.

Writing Templates

Exalt provides a tagged template function for creating templates. This is similar to JSX but its entirely native to the web. You can write standard HTML inside them and use JavaScript expressions through placeholders indicated by curly braces prefixed with a dollar sign.

The html function provides an easier way to bind events to elements and pass data to components, You can pass any data you want as an attribute and Exalt will process it for you. Events are functions bound to attributes with the "on" prefix, these can be any native dom events or custom events.

Additionally you can spread an object as attributes using the spread attribute. All properties on the object will be bound as an attribute using the key as the attribute name, and the value as the attribute value.

Store API

Exalt Components have reactive properties for updating the component it belongs to, but in cases where components need to share state, Exalt provides a global state solution via a store api. You can create a store and then tell individial components to listen to changes on the store using the connect component option. It is best practice to not manipulate the store directly and instead define functions inside the store.