Dom node settings

Apart of CSS settings DOM nodes have a bunch of other kinds of settings.

DOM node type

At the top-left of the right sidebar you see the DOM node type setting.

DOM type does not affect the styling. Base browser styles are reset so that it is easier for you to specify the right styles disregarding of the node type.

Is active

On the top-right you can see a setting indicating if the node is active. This setting can be set up statically or it can be dynamic like CSS properties and reactively update based on store, data, prop or method.

If a node is not active it does not mean that it has a CSS of display: none. It means that the node does not appear in the DOM-tree at all. This is important to understand from the performance and SEO points of view.

Node name

Beloew DOM node type and is active settings you can see the input for the node name.

If you look at a complex nodes-tree it can be hard to understnd right away what exactly a specific element represents in the UI.

If you give a name to a node - you will see its name the nodes tree, so it will be easier for you to work with the nodes tree.

DOM node attributes

When working with a DOM node, on the right sidebar you can see a tab with settings of DOM node attributes.

You can find specific attributes, relevant for the dom type. Also you can add custom attributes. Values of the attributes can be either static or dynamic coming from store, data, props or methods.

Event handlers

The main way to make the UI interactive is to add event handlers to DOM nodes. Open the JS tab on the right sidebar to see the panel with event handler settings for the node.

Near the needed event use the selector to choose a method that will run when the event fires.