Varendo

Standalone web components

Use a published component directly when the application already owns rows and interaction state.

A region is optional. Use a standalone component when your screen already owns the rows and state and only needs a table, form control, or chart.

## Create a small host

Use Node.js 24 and create a Vite TypeScript project:

Shell example
npm create vite@latest people-list -- --template vanilla-ts
cd people-list
npm install --save-exact @varendo/web@0.1.0

Keep Vite's #app container. Replace src/main.ts with:

TypeScript example
import { AeliqoRecordListElement } from '@varendo/web/record-list';

if (!customElements.get('aeliqo-record-list')) {
  customElements.define('aeliqo-record-list', AeliqoRecordListElement);
}
const target = document.querySelector<HTMLElement>('#app');
if (!target) throw new Error('Missing app container.');
const list = new AeliqoRecordListElement();
list.identity = ['id'];
list.columns = [{ key: 'name', label: 'Name' }];
list.rows = [{ id: 'ada', name: 'Ada Chen' }];
target.append(list);

Run npm run dev and open the printed URL. You should see Ada Chen in a record list. This component displays the rows you assign; it does not fetch records or authorize them. If nothing appears, check the browser console, the #app container, and the import path. Do not assign the rows as an HTML attribute.

Follow the boundary rules

  • Pass arrays and objects as properties, not serialized attributes.
  • Treat event detail as untrusted input. Recheck permissions before any side effect.
  • Exercise the loading, empty, partial, denied, and error states that apply.
  • Style with public theme tokens and shadow parts. Do not depend on internal markup.