Tree item <l-tree-item>

A single node inside <l-tree>. Nested <l-tree-item> children become sub-nodes. See Tree for examples, selection modes, and keyboard behaviour.

Roles and ARIA states are set on ElementInternals and mirrored to DOM attributes, so both [role="treeitem"] and [aria-selected]/[aria-expanded]/[aria-disabled] selectors match. See Tree › Selectors & testing.

HTML tag<l-tree-item>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element · Shadow DOM

API reference

Importing

JS

import 'luxen-ui/tree-item';

Attributes & Properties

expandedbooleandefault:falseProperty

Whether the item is expanded.

selectedbooleandefault:falseProperty

Whether the item is selected.

indeterminatebooleandefault:falseProperty

Whether the checkbox is indeterminate (some descendants selected).

disabledbooleandefault:falseProperty

Whether the item is disabled.

lazybooleandefault:falseProperty

Marks this item as having children that will be loaded on first expand.

loadingbooleandefault:falseProperty

Whether the item is currently loading (shows a spinner).

showCheckboxbooleanProperty

Set by <l-tree>: whether a checkbox is shown.

depthnumberProperty

Set by <l-tree>: depth of the item in the tree (0 = root).

hasChildrenbooleanProperty

Whether this item has nested tree-item children.

Methods

setPosition(level: number, posInSet: number, setSize: number)Method

Set by <l-tree>: ARIA position within the tree. level is 1-based depth, posInSet/setSize describe the item's rank among its siblings. These let screen readers announce "level 2, 3 of 5" even when lazy children keep the full set out of the DOM.

getChildrenItems({ includeDisabled = true }: unknown)→TreeItem[]Method

Returns the child <l-tree-item> elements directly under this one.

isLeaf()→booleanMethod

Returns true if this item has no expandable children.

getTextLabel()→stringMethod

Returns the text label of this item.

toggle()Method

Toggle expand state. Opening a lazy item emits lazy-load (via updated).

Events

expandEvent

Fired when the item is expanded.

collapseEvent

Fired when the item is collapsed.

lazy-loadEvent

Fired when a lazy item is expanded for the first time. Consumers should append children and set lazy=false.

Slots

(default)Slot

Label content (kept to a single row).

prefixSlot

Leading content before the label (e.g. icon).

suffixSlot

Trailing content.

expand-iconSlot

Icon shown when the item is collapsed.

collapse-iconSlot

Icon shown when the item is expanded.

contentSlot

Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed.

CSS parts

basePart

The item row.

expand-buttonPart

The chevron toggle area.

checkboxPart

The native checkbox input.

labelPart

The label container.

branchPart

Wrapper around the content and children slots; carries the indent guide.

contentPart

The content slot wrapper (block area between the row and the children).

childrenPart

The nested items container.

CSS custom properties

All layout tokens (--row-height, --row-padding-inline, --chevron-size, --item-gap, --indent-*) are declared on <l-tree> and cascade to every item. See Tree › CSS custom properties.