Powering UI with Lit Web Components

Introduction

As Sakai continues to evolve as a leading open-source learning management system, its front-end stack must juggle complexity, performance, and consistency. By embracing Lit web components, the Sakai community gains modularity, encapsulation, and ease of collaboration—critical for a project that serves dozens of institutions worldwide.

Why Lit Shines

• Tiny Bundles & Fast Rendering
  Lit compiles templates into efficient JavaScript, keeping component payloads minimal and UI updates lightning-fast.
• Reactive Properties
  Declare properties with decorators and let Lit handle update cycles—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);