Special Component Events

There is one common event and two component-only events to know about when using components.

1. draw. This event runs before a custom element component is processed. So if you need something happening before the component starts to get rendered, use this. However, no component details will be available at this point. If you need to be "in" the component, and you need to do something before the component is rendered, use the beforeComponentOpen event instead.
2. beforeComponentOpen. This is useful for setting up variables before any component is fully rendered on the page.
3. componentOpen. This event fires when the component is first drawn and before any inner component element "draw" events run. This is useful for performing actions when a component's HTML is first rendered.

The main events that are mentioned in this section are beforeComponentOpen and componentOpen. These are specific to components and will not work with any other event selector. They work with "&", which refers to the component itself, and nothing else.

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 my-carrots {
    &:beforeComponentOpen {
        $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 my-carrots strictlyPrivateEvents {
    &:componentOpen {
        p {
            render: "This is rendered inside the p tag when the component draws itself.";
        }
    }
    html {
        <p id="carrot"></p>
    }
}