Powering UI with Lit Web Components

Introduction

Sakai serves many institutions, so its front-end code has to stay consistent across tools without becoming hard to change. Lit web components help the project ship reusable interface pieces with standard browser APIs and a small runtime.

Why Lit Helps

• Small Bundles and Fast Rendering Lit compiles templates into efficient JavaScript, which keeps component payloads small and updates quick.
• Reactive Properties Developers declare properties with decorators and Lit handles update cycles. There is no manual DOM diffing.
• Familiar Syntax Built on standard ES modules and tagged template literals, teams learn Lit in hours, not weeks.

import { LitElement, html, css } from 'lit';

class SakaiButton extends LitElement {
  static styles = css`button { padding: 0.5em 1em; }`;
  static properties = { label: { type: String } };

  constructor() {
    super();
    this.label = 'Click me';
  }

  render() {
    return html`<button @click=${() => this.dispatchEvent(new Event('activate'))}>
      ${this.label}
    </button>`;
  }
}

customElements.define('sakai-button', SakaiButton);