HTML Blocks

Components in Active CSS are html blocks that are generated on the front-end, in the browser.

They can be based on custom elements, or not. You can nest them inside each other at the point of rendering them. But you write them as independent blocks of code.

You can use components to do lot of things. The code editor used on this website was made by using nested components. There is no fixed best practice as to how Active CSS components should be used - there are just techniques you can use to create them. The techniques that you end up using really depends on what you want to do with components. You could build an awesome SPA website with absolutely no components. Components are not essential for any website, but they can come in handy when it makes sense to use them. It isn't necessarily recommended that you build your whole website using components. It can make your code more complicated than it needs to be and slow your development. It can even slow up your website and make it feel clunky as things get incrementally drawn on the page. If, however, you just want smaller pieces of code that you can re-use and give to people, or you have to use 3rd-party APIs that would be slow if you have to wait for a response from the server, or you are building a massive social networking app that needs to rendered totally on the front-end with minimal server traffic to save money and bandwidth, or employ a thousand coders all making different parts of the same page so that you need isolated separation of code, then rendering your components on the front-end can make sense. But components, or even reactive variables, are not needed to build an SPA - ie. they don't have to be an essential for any modern website. So don't feel you have to learn about components if you are not that interested, or if you think you are not ready to learn about them.

But if you need components and want to learn how to write them, let's get started!

All components in Active CSS follow the same basic format.

Let's start with a basic component, one that is just a regular block of html, with no custom elements involved.

To create a component, you use the @component syntax.

@component helloWorld {
    html {
        <p>Hello world</p>
    }
}

HTML blocks always go into the "html" section in components as above.

This component can then be displayed using the pipe operator "|" like this:

button:click {
    #myContainer {
        render: "{|helloWorld}";
    }
}

The contents of the component will then be displayed.

In the #myContainer element, this then produces:

Hello world

That is the basic way to create a component.