React, Vue and Angular

React

React 19 sets properties on custom elements and listens to their events, so you can pass arrays and objects directly. On React 18, set object properties and add event listeners through a ref.

import "@lit-material/table";

export function People({ rows }) {
  return <lit-material-table caption="People" columns={columns} rows={rows} />;
}

Vue

Tell the compiler which tags are custom elements, then bind properties with .prop and listen with @.

// vite.config.js
vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith("lit-material-") } } })

<lit-material-table caption="People" :columns.prop="columns" :rows.prop="rows" />
<lit-material-switch :checked="on" @change="on = $event.target.checked" />

Angular

Add CUSTOM_ELEMENTS_SCHEMA to the component, then bind properties with [ ] and events with ( ).

@Component({
  selector: "app-people",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<lit-material-table caption="People" [columns]="columns" [rows]="rows"></lit-material-table>`,
})
export class PeopleComponent {}

Plain HTML

Import the module and write the tag. Arrays and objects go in as properties from script, or as JSON attributes in markup.