Lit Element Skeleton Generator

LitElement is a base class for creating fast, lightweight Web Components using the Lit library. It simplifies the process of defining custom elements with reactive properties and declarative HTML templates. This generator helps developers kickstart a new Lit component by providing a pre-configured boilerplate with common options like properties, styles, and events, saving repetitive typing and ensuring best practices.

You can install Lit via npm: npm install lit. Then import the necessary modules like LitElement, html, and css from the lit package. The generated code already includes the correct import statements.

Static properties is a getter that returns an object describing each reactive property. For each property you can specify its type (how to convert from HTML attribute), reflect (whether to sync back to the attribute), and other options. This mechanism replaces the older decorators approach and works natively in JavaScript.

LitElement provides a static styles property where you can define scoped CSS using the css tagged template literal. Styles defined here only affect your component's shadow DOM. If you check "Include static styles" in the generator, a basic :host block is added, which you can expand later.

You can dispatch custom events using this.dispatchEvent(new CustomEvent(...)). The generator can include a sample event method that shows how to fire an event with detail and bubbling options. You can trigger this method from your template or lifecycle callbacks.

Yes! Simply select the TypeScript option. The generator will output a class with @customElement and @property decorators, along with proper type annotations. This approach is widely used in modern Lit projects and provides excellent IDE support.

When reflect: true is set, changes to the property in JavaScript will automatically update the corresponding HTML attribute on the element. This is useful when you want CSS attribute selectors or debugging tools to see the current state reflected in the DOM.

LitElement supports standard custom element lifecycle methods such as connectedCallback, disconnectedCallback, attributeChangedCallback, and additional Lit-specific ones like firstUpdated and updated. Override them in your class. The generated skeleton doesn't include them by default, but you can easily add them after generation.