A hierarchical, async, searchable select. Data is supplied through a TreeSelectProvider (HTTP or in-memory); selection is held as full TreeNode objects bound with v-model.
It has no shadow root. Anything you render into it — row templates, node templates, cell renderers — stays in the document, so your app's stylesheet, your own component styles and Bootstrap's utility classes reach it normally.
Its own CSS is scoped at build time onto a data-mps attribute, the same device Angular uses for _ngcontent, so it cannot leak out onto your markup.
The trade-off runs the other way: page CSS now reaches this component's internals, exactly as emulated encapsulation behaves everywhere else. ::part() and ::slotted() no longer address it — use ordinary CSS selectors instead.
Roots, lazy children and search are fetched from /api/treeItems. Type to search server-side.
Selected: —
mode="multiple" renders each selection as a removable chip. Backed by an in-memory sample tree.
Selected: —
mode="checkbox" with :cascade-select="true": checking a parent selects its loaded descendants, and a parent becomes indeterminate when only some children are selected.
Selected: —
variant="button" opens a panel with an inline search box; :show-clear="true" adds a clear affordance once a value is selected.
Selected: —