@conectate/ct-lit v4.4.9

ct-lit

Enhanced wrapper for LitElement with additional utility methods.

Installation

npm install @conectate/ct-lit

Usage

ct-lit provides the CtLit class, which extends LitElement and adds useful utility methods. It also re-exports most commonly used functions and decorators from the lit library.

Basic Example

import { CtLit, html, customElement } from '@conectate/ct-lit';

@customElement('my-element')
export class MyElement extends CtLit {
  render() {
    return html`
      <div>Hello World!</div>
    `;
  }
}

Utility Methods Example

@customElement('my-element')
export class MyElement extends CtLit {
  firstUpdated() {
    // Select elements using simplified selectors
    const button = this.$$('#myButton');

    // Fire custom events easily
    this.fire('element-ready', { status: 'ok' });
  }

  handleClick() {
    // Helper for smooth scrolling
    this.scrollToY(500, 800, 'easeInOutQuint');
  }

  render() {
    return html`
      <div>
        <button id="myButton" @click=${this.handleClick}>Click me</button>

        <!-- Conditional rendering helper -->
        ${If(this.showContent, html`<div>Additional content</div>`)}
      </div>
    `;
  }
}

API Reference

CtLit Class

Extends the LitElement class with additional utility methods.

Methods

Helper Functions

Exports from Lit

The library re-exports the following from the lit library:

• css, html, svg, unsafeCSS from lit
• property, query, queryAll, queryAssignedNodes, queryAsync, state from lit/decorators.js
• unsafeHTML from lit/directives/unsafe-html.js
• until from lit/directives/until.js
• LitElement from lit

Decorators

License

MIT