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.

Special Component Events

There are two special events that are available when using components, and can only be used in components.

  1. beforeComponentOpen. This is useful for setting up variables before the component is drawn or rendered on the page (render and draw mean the same thing).
  2. componentOpen. This event fires when the component is first drawn and before any "draw" events run. This is useful for performing actions when a component's HTML is first rendered.

There are a few more component events for compatibility with native web components, and this is covered in a later section.

The main component events that you should find the most useful are the two events mentioned in this section. They are easy to remember, and it's pretty obvious what they do.

beforeComponentOpen

Use this event for doing things before the component is drawn on the page. Don't try and manipulate the HTML of the component in this event - it hasn't been drawn yet, and it cannot be manipulated before it is drawn on the page. But variables can be set, so that when the HTML is drawn the variables are available to be substituted into place. So this event is good for setting up variables and that sort of thing. You can avoid flicker on the screen when variables initially get drawn by declaring variables inside this event.

The beforeComponentOpen event must have the "&:" prefix. All events must have a prefix. "&" means that the event is applying to the component itself.

Example:

@component carrots {
&:beforeComponentOpen {
var: totalCarrots 3;
}
html {
<p>I want to eat {totalCarrots} carrots.</p>
}
}
componentOpen

You can use this event for initiating further actions on the component after it is drawn.

Example:

@component carrots privateEvents {
&:componentOpen {
p {
render: "This is rendered inside the p tag after it is drawn on the page.";
}
}
html {
<p id="carrot"></p>
}
}