lit-component

What problem does it solve?

Developing robust, reactive web components that integrate seamlessly with a distributed runtime and a sophisticated theme system can be challenging. This skill provides a comprehensive guide to building Lit components for Common UI v2, covering everything from basic structure to advanced Cell integration and theme management, ensuring high-quality, maintainable UI.

Core Features & Use Cases

• Theme-Aware UI Development: Implement components that automatically adapt to user preferences and theme settings, ensuring a consistent look and feel.
• Reactive Data Integration: Seamlessly connect Lit components to Common Tools runtime Cells, enabling dynamic, real-time UI updates.
• Advanced Component Patterns: Learn to apply architectural patterns like context provision, third-party library integration, and path-based operations for complex UI challenges.
• Use Case: A UI developer needs to create a new ct- prefixed input component for the CommonTools platform. This skill guides them through setting up the component, integrating it with the theme system, ensuring it reacts to data changes from a Cell, and handling user input with proper event emission, significantly accelerating development.

Quick Start

Basic Lit component template:

import { css, html } from "lit"; import { BaseElement } from "../../core/base-element.ts";

export class CTComponentName extends BaseElement { static override styles = [ BaseElement.baseStyles, css :host { display: block; box-sizing: border-box; } , ];

static override properties = { // Define reactive properties };

constructor() { super(); // Set defaults }

override render() { return html<!-- component template -->; } }