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.

Using DOM attributes

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

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.

You can also use attribute 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. We use this on our unCSSed video player example to update the slider when there is a timeupdate event triggered when playing the video:

#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 created with create-element. 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.

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;".