Virtual DOM

Each XHTML tag in a component file is represented by an instance of Tag.

Each text is represented by an instance of Text.

The base class for both types is Element.

Getting elements

The main tag for a component file or component can be accessed inside <script /> as this.node.

Each tag with ref attribute is accessible by the this.refs object or using the ${refs} string interpolation unless it puts a component.

In styles, connected node can be reached using the this.node reference.

Querying elements

All methods available in Virtual DOM are described in the API Reference.

One of the most interesting parts, are querying elements using CSS Selector.

Use query() to get the first matched element.

Use queryAll() to get all matched elements.

To find a text, specify #text in CSS Selector.

<p><span>big</span> yellow <span>dragon</span></p>

console.log(this.node.queryAll('p > span > #text'));
// [big, dragon]

console.log(this.node.queryAll('p #text'));
// [big, yellow, dragon]