Element Refs

You can reference an element by ID simply by using the # following by its ID. For example, you may toggle the open class on a dropdown menu with the following:

<button vsn-on:click="#dropdown-menu.@class ~= 'open'">Hamburger</button>

You can also use them in behaviors:

behavior #hamburger {
    on click(event) {
        #dropdown-menu.@class ~= 'open';
    }
}

Element Queries

The ?> and ?< operators let you query the DOM relative to the current element. It keeps your selectors scoped and avoids global queries.

?(.anywhere) Search the entire DOM for elements with the class .anywhere
?>(.child-selector) Search for children with the class .child-selector
?<(.ancestor-selector Search for ancestors with the class .ancestor-selector

Element queries may also be used in behaviors.

Notes from the creator

Wherever you are, there you go.