Lit

sn_aiux widgets are Lit web components — specifically, classes that extend AIUXWidgetElement (which itself extends LitElement). This page covers the raw Lit surface that any widget author needs: the html and css tagged templates, the standard directives, and the ContextConsumer integration. For the AIUX-specific additions (services, lifecycle extras, client_tools, the framework's own directives) see Component.

If you've never written Lit before, the official documentation is the canonical reference. The cheat sheet here is just the surface that ships in the sn_aiux bundle, with the import paths you'll actually need inside a widget.

Templating: html, css, svg

import { html, css, svg, nothing } from 'lit'

Use html inside render(), css inside static styles, and nothing as a conditional-render escape hatch:

render() {
  return html`
    <h2>${this.title}</h2>
    ${this.showDetails ? html`<p>${this.body}</p>` : nothing}
  `;
}

Standard directives

Each directive is imported from its own submodule. All return DirectiveResult and are interpolated into an html template the same way as values.

Example combining repeat and classMap:

import { repeat } from 'lit/directives/repeat.js';
import { classMap } from 'lit/directives/class-map.js';

render() {
  return html`
    <ul>
      ${repeat(this.items, item => item.sysId, item => html`
        <li class=${classMap({ active: item.sysId === this.selectedId })}>
          ${item.label}
        </li>`)}
    </ul>`;
}

ContextConsumer — read context state

import { ContextConsumer } from 'lit'

A ContextConsumer lets your widget read state published by another part of the tree. Combine with the Lit contexts the framework exposes — routeContext, experienceContext, etc.

new ContextConsumer(host, {
  context: routeContext,
  subscribe: true,
  callback: (value) => { /* called on every change */ },
})

Reactive properties

Declared via static properties on your class:

class MyWidget extends AIUXWidgetElement {
  static properties = {
    title:        { type: String  },
    count:        { type: Number  },
    enabled:      { type: Boolean },
    items:        { type: Array   },
    config:       { type: Object  },
  };
}

Any change to a declared property schedules a re-render. Use this.requestUpdate(name?, oldValue?) to force one manually.

Lifecycle (Lit-side)

The standard Lit lifecycle is available on every widget. For the AIUX-specific addition onDataChange, see Component.