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.
Set one fetch callback and the web component owns the whole loop: it loads page 1, derives the total from the response, and fetches each window only as its rows scroll into view. This list is the 1000 seeded orders from apps/api; scroll it and watch the fetch log — it never drains every page. No totalRecords prop, no event bridge.
Pages fetched: — (0 so far)
The same single fetch callback, branching on req.parentId for roots vs. children. The WC paginates roots lazily and loads children on expand; selected row objects arrive on onSelectionChange as detail.selectedRows.