Passing Elements into Components

Being able to pass sections of html into components as well as variables is possible in Active CSS.

With custom element components you can refer to the insides of a host tag with the variable {$CHILDREN}. This refers to the child elements of the host tag. This only works for custom elements.

When the component is drawn, the insides are assigned to the variable {$CHILDREN} and you can output this anywhere in your component.

Example:

body:init {
    render-after-begin: "{|someAddresses}";
}

@component someAddresses {
    html {
        <address-field name="Dave" location="London">
            <p>Here is an address:</p>
        </address-field>
        <address-field name="Shirley" location="Barcombe Mills">
            <p>Here is another address:</p>
        </address-field>
    }
}

@component address-field {
    html {
        {$CHILDREN}
        <p>Name: {@host:name}</p>
        <p>Location: {@host:location}</p>
    }
}

Here, the direct child descendants of the host tag (<address-field>) are output using the variable {$CHILDREN} in the specified place in the displayAddress component.

 

The {$SELF} variable

It is also possible to re-render the outer host tag using the {$SELF} variable from inside the component. Similar to taking the inner HTML and assigning it to CHILDREN}, Active CSS assigns the outer host tag to the {$SELF} variable.