Using DOM attributes and properties

Attributes

You can refer to the attributes of event selectors or target selectors within an event selector's config declaration. You can refer to any attribute, such as the id, src, class, "data-" attribute etc. These are called attribute variables {@...}. Note the single "@" sign.

Eg. you could refer to the src attribute, using {@src}, or a data-ref attribute, using {@data-ref}.

For example:

.menuItem:click {
    #{@data-submenu-id} {
        take-class: .mini-selected;
    }
}

The above example will check the element clicked on for an attribute of "data-submenu-id", which contains a reference to a div specific for that menu item clicked on, and substitute the attribute value into the target selector.

Properties

Likewise, you can get the latest property of an attribute, for instance when you need the content of a text field that may have just been edited. That would be a property variable {@@...}. Note the double "@" sign.

Eg. To get the latest property of a text input field, you would want to get the property with "{@@value}" and not the attribute, as the property will have the latest content and the attribute will only have the original unchanged content.

More info

You can also use attribute or property variables in action values, like in the example in the next bit below. Attributes in action values are first checked in the target selector, and then if the attribute is not present in the target selector it will bubble-up into the event selector and substitute from there if it is present.

Incidentally, host attribute variables are also available in the beforeComponentOpen and openComponent events of components. But once the other events of the component are being fired, attributes will come from the element that triggered the event and not the component's host element.

Referencing attribute by specified selector

You can also reference attributes or properties by direct reference.

#videoPlayer:timeupdate {
	#videoSlider { set-property: value {@#videoPlayer:currentTime}; }
}

Technically in this case we could have just used the {@currentTime} and just let it bubble up to event selector, but we have it here as an example.

The syntax is {@selector:attribute or property}

Component host attributes

To reference an attribute of the host element of a shadow DOM tree, put "host:" before the name of the attribute. Eg.

render: {@host:name};

Host attribute variables are also available in the beforeComponentOpen and openComponent events of components. But once the other events of the component are being fired, attributes will come from the element that triggered the event and not the component's host element.

Data-binding host attributes for components

You can data-bind an attribute variable that references a host element of a shadow DOM to automatically change when the host element's attribute changes. This will only work on custom elements that have been set up with the observe option in the @component statement. This is a limitation of native technology, so we have avoided implementing this on regular elements for the time being. Observable attributes are at the time of writing only native for custom elements.

See the /manual/shadow-dom-attribute-binding.html page for an example on how to do that.

Using attributes to create variables names dynamically

(since version 2.13.0)

You can use attributes to create variables to look up in conditional statements, like @if, or in setting up variables.

For example, if there is a data-ref attribute in an HTML tag with "1", then the variable $myVar{@data-ref} will get converted to $myVar1 when it is run in your config:

#myDiv:click {
    $myVar{@data-ref}: true;
    @if ($myVar{@data-ref} === true) {
        alert: "data-ref = {@data-ref}";
    }
}

<div id="myDiv" data-ref="1" style="width: 20px; height: 20px; background-color: green;"></div>

What you can't do

You cannot reference an attribute inside the top-level event selector itself, like "#{@data-div}:click", as it wouldn't make any sense to do this. If appropriate, instead you would use a regular CSS selector to find an attribute that matched a value.

Likewise you cannot currently reference an attribute as an action command, like "{@data-action}: #myDiv;".