Passing Variables into Components

You can refer to ACSS variables directly in components, as long as the variables are in the same scope as the component. In fact, there are many different ways to achieve the same results using ACSS. This is a flexibility that languages tend to provide.

This section explains the alternative method of passing variables into components via the attributes of the component host.

When you are writing a re-usable component, you may need to allow options to be set on the component that only apply to that component and no other instances of it.

A simple method could be to allow the options to be set as attributes on the component tag itself.

You would normally use a custom element for this. You can also use a regular HTML tag as a component host, but custom elements allow for more flexibility when dealing with attributes. Custom attributes in HTML tags should be written like "data-" and then the suffix, like "data-name" or "data-reference" or whatever. That is following the naming standard for custom attributes. You may have seen odd attributes around the interwebs, like "g-for". These are attributes that do not confirm to web standards and should not be on your final rendered page, but they can certainly be used on the back-end, before a "build" step removes them.

But, with custom elements you can name attributes however you like.

The custom element itself has these attributes, and surrounds the inner component, and we can call the custom element the host of the component.

You refer to these host attributes with the {@host:varname} syntax.

For example:

body:init {
    render-after-begin: "<hello-there name='Dave'></hello-there>
        <hello-there name='Shirley'></hello-there>
        <hello-there name='Tracey'></hello-there>";
}

@component hello-there {
    html {
        <p>Hi there {@host:name}</p>
    }
}

Reactive attributes

This is also called "attribute binding". It is the binding of a variable to an attribute so that the variable inside the component changes when the attribute changes.

Custom elements allow you to have reactive attributes. Attributes can be observed on the host tag and when the attributes change, the variables that reference it inside the component can automatically update.

To do this, use the option observe in the @component statement followed by the attributes to observe, separated with a space.

Variables in the inner component can then be given double-curlies to turn them into reactive variables.

This method of observing attributes only works for custom element components. You can only observe attributes for reactive updating on custom elements.

Example:

body:init {
    render-after-begin: "<hello-there name='Dave' height='6'></hello-there>" after stack;
}

hello-there:draw {
	pause: 2s;
	set-attribute: name "Shirley", height "5";
	pause: 2s;
	set-attribute: name "Tracey", height "7";
}

@component hello-there observe(name height) {
	html {
        <p>Hi there {{@host:name}}. I see you are {{@host:height}} feet tall.</p>
    }
}

That example renders the component once only, and then by updating the attributes of the host tag the inner contents are changed.

Passing Variables into Components