There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
Processing...
This may take a few seconds.

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 is not future-compatible with the internet. 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 can assign a component to a custom element using the create-element command, so that whenever you render the custom element, the component gets drawn inside it.

Let's do that with the helloWorld component from the last section.

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

body:preInit {
create-element: hello-world helloWorld;
}

That's it. We have created a <hello-world></hello-world> custom element and assigned the helloWorld component to it.

Now we can use the tag.

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.

 

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