Custom Elements

Custom elements are HTML tags that you make up yourself.

Something like "<address-field></address-field>" would be a custom element. It is not one of the pre-defined HTML tags.

The name you choose for your custom tag must be at least two words separated with a hyphen. This is a web standard. It ensures that whatever you create as an html tag will work with future versions of html. Eg. You should not write <address></address>, even if it works on your browser. That would not be keeping to web standards. Use something like <address-field> - but it really doesn't matter as long as you pick something at least two words separate by a hyphen.

You create a custom element component by specifying the tag name in the @component statement. Whenever the custom element is then drawn on the page, the component automatically renders.

For example:

@component hello-world {
    html {
        <p>Hello world</p>
    }
}

That's it. We have created a very basic <hello-world></hello-world> custom element component.

That wasn't too scary, was it?

Behind the scenes, it has been registered in the DOM as an official custom element.

Now we can use the tag. If it is already on the page, as pre-rendered HTML, it will automatically render as a component. You don't have to do anything else.

But if we want to render it manually, we can do this:

button:click {
    #myContainer {
        render: "<hello-world></hello-world>";
    }
}

In the #myContainer element this will produce:

Hello world

 

The <hello-world></hello-world> tag is called the component host, or the component host tag. It hosts, or in other words is the parent of the component.

You can also import HTML and CSS into the component, for instance if you need to fetch a dynamic "view" from a back-end server, or if you just want to keep your HTML and CSS code outside of ACSS altogether, and how to do that is covered in the next section.

 

Note: This method is new for the version 2.10.0 core. In previous ACSS versions, you would use the create-element command. You don't need to do that now.

Advanced use note: See the Passing in Variables section to see how to respond to changes in component host tag attributes.