Tree

c2-tree

Hierarchical tree view with expansion, selection and lazy loading.

It can be authored two ways, and both produce the same DOM and the same events. Nest the rows in markup:

<c2-tree expanded-items="src">
  <c2-tree-item value="src" label="src">
    <c2-tree-item value="app.ts" label="app.ts"></c2-tree-item>
  </c2-tree-item>
</c2-tree>

…or hand it data, which it renders into the same c2-tree-item elements:

tree.items = [{ value: 'src', label: 'src', children: [{ value: 'app.ts', label: 'app.ts' }] }]

The tree owns all state. value holds the selected rows, expanded-items the expanded ones, and every row's expanded, selected, indeterminate, level and roving tabindex are written from here on each sync — so drive those two arrays rather than the rows.

In the data-driven mode renderItem takes over a row's whole content, or renderIcon, renderLabel and renderActions replace one part each. They are handed to Lit, so they return a Lit template or a DOM node — not framework markup such as JSX.

children-outline draws a vertical rule per level of depth, the way a file explorer marks which branch each row belongs to. It is off by default; --c2-tree-item__guide--color and --c2-tree-item__guide--width style the rules once it is on.

Only expanded rows render their children slot, which keeps a collapsed subtree out of both layout and the accessibility tree — though the child elements are still created. Reach for virtualization rather than this component once a tree runs to many thousands of rows.

Keyboard

Arrow Up and Down walk the visible rows. Arrow Right expands a collapsed branch, then moves to its first child; Arrow Left collapses an expanded one, then moves to its parent. Home and End jump to the ends, Enter and Space select, * expands every sibling of the focused row, and typing a few letters jumps to the matching row. With selection="multiple", Shift extends a range and Ctrl or Cmd toggles a single row.

c2-tree-item

One row of a https://github.com/code2nguyen/web-components | c2-tree.

Nest items to build the hierarchy — a branch's children are its own c2-tree-item element children:

<c2-tree>
  <c2-tree-item value="src" label="src">
    <c2-tree-item value="app.ts" label="app.ts"></c2-tree-item>
  </c2-tree-item>
</c2-tree>

The item draws a row and nothing else: expanded, selected, indeterminate, level and the roving tabindex are all written by the parent c2-tree, which owns the tree's state. Setting them by hand works but is overwritten on the tree's next sync — drive the tree's value and expanded-items instead.

The children slot is only rendered while the row is expanded, so a collapsed subtree is not laid out and stays out of the accessibility tree. The child elements themselves still exist in the DOM.