# @conectate/ct-lit

> Super class wrapper for lit

Latest version **4.4.9** (published 2025-04-29) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @conectate/ct-lit
pnpm add @conectate/ct-lit
yarn add @conectate/ct-lit
bun add @conectate/ct-lit
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.4.9 |
| Published | 2025-04-29 |
| First published | 2019-06-01 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Herberth Obregón |
| Maintainers | herberthobregon |
| Keywords | Lit, React, Vue, Angular, Web Components, Polymer |

## Links

- npm: https://www.npmjs.com/package/@conectate/ct-lit
- Repository: https://github.com/conectate/ct-elements
- Issues: https://github.com/conectate/ct-elements/issues
- npm.io page: https://npm.io/package/@conectate/ct-lit

## Dependencies (2)

- [lit](https://npm.io/package/lit.md) ^3.2.1
- [tslib](https://npm.io/package/tslib.md) ^2.6.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.4.9 (latest) — 2025-04-29
- 4.3.0 — 2025-02-16
- 4.0.0 — 2024-07-27
- 3.12.0 — 2023-09-07
- 3.11.0 — 2023-09-02
- 3.10.0 — 2023-09-02
- 3.9.0 — 2023-08-11
- 3.8.1 — 2023-07-26
- 3.8.0 — 2023-07-26
- 3.7.5 — 2023-04-11
- 3.7.4 — 2023-01-12
- 3.7.3 — 2022-08-31
- 3.7.1 — 2022-08-09
- 3.7.0 — 2022-08-09
- 3.6.0 — 2022-02-27
- … 13 more at https://npm.io/package/@conectate/ct-lit/versions

## README

# ct-lit

Enhanced wrapper for LitElement with additional utility methods.

[![Published on npm](https://img.shields.io/npm/v/@conectate/ct-lit.svg)](https://www.npmjs.com/package/@conectate/ct-lit)

## Installation

```bash
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

```typescript
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

```typescript
@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

| Method      | Parameters                                                                 | Return Type                                       | Description                                             |
| ----------- | -------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------- |
| `$$`        | `name: string`                                                             | `HTMLElement \| Element \| undefined \| null`     | Returns the first element that matches the CSS selector |
| `$$$`       | `name: string`                                                             | `NodeListOf<HTMLElement \| Element> \| undefined` | Returns all elements that match the CSS selector        |
| `mapIDs`    | -                                                                          | `void`                                            | Maps all elements with IDs to `this.$` (deprecated)     |
| `deepClone` | `ob: T`                                                                    | `T`                                               | Creates a deep clone of an object                       |
| `fire`      | `name: string, value: any`                                                 | `void`                                            | Dispatches a CustomEvent with the given name and value  |
| `scrollToY` | `scrollTargetY?: number, time?: number, easing?: string, target?: Element` | `void`                                            | Smoothly scrolls to a position on the page              |

### Helper Functions

| Function | Parameters                          | Return Type | Description                      |
| -------- | ----------------------------------- | ----------- | -------------------------------- |
| `If`     | `condition: boolean, template: any` | `any`       | Conditionally renders a template |

### 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

| Decorator       | Parameters        | Description              |
| --------------- | ----------------- | ------------------------ |
| `customElement` | `tagName: string` | Defines a custom element |

## License

MIT

---
_Source: https://npm.io/package/@conectate/ct-lit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._