# @rxdi/lit-html

> ```bash npm i @rxdi/lit-html ```

Latest version **0.7.251** (published 2026-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rxdi/lit-html
pnpm add @rxdi/lit-html
yarn add @rxdi/lit-html
bun add @rxdi/lit-html
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.251 |
| Published | 2026-08-19 |
| First published | 2019-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 20.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kristiyan Tachev |
| Maintainers | rxdi |

## Links

- npm: https://www.npmjs.com/package/@rxdi/lit-html
- Repository: https://github.com/rxdi/lit-html
- Homepage: https://github.com/rxdi/lit-html#readme
- Issues: https://github.com/rxdi/lit-html/issues
- npm.io page: https://npm.io/package/@rxdi/lit-html

## Dependencies (3)

- [lit-html](https://npm.io/package/lit-html.md) 2.5.0
- [lit-element](https://npm.io/package/lit-element.md) 3.2.2
- [@lit/reactive-element](https://npm.io/package/@lit/reactive-element.md) 1.5.0

## Recent versions

- 0.7.251 (latest) — 2026-08-19
- 0.7.191-nightly.3 (nightly) — 2025-12-22
- 0.7.250 — 2026-07-02
- 0.7.249 — 2026-06-19
- 0.7.248 — 2026-05-28
- 0.7.247 — 2026-05-27
- 0.7.246 — 2026-05-24
- 0.7.245 — 2026-05-23
- 0.7.244 — 2026-05-23
- 0.7.243 — 2026-05-14
- 0.7.242 — 2026-05-14
- 0.7.241 — 2026-05-05
- 0.7.240 — 2026-04-29
- 0.7.239 — 2026-04-27
- 0.7.238 — 2026-04-22
- … 329 more at https://npm.io/package/@rxdi/lit-html/versions

## README

#### Install

```bash
npm i @rxdi/lit-html
```

Example component

```typescript
import { LitElement, Component, html, css } from '@rxdi/lit-html';

/**
 * @customElement rx-description
 */
@Component({
  selector: 'rx-description',
  style: css`
    .description {
      color: #222;
      font-size: 14px;
      font-weight: normal;
      text-transform: uppercase;
    }

    .text {
      color: #666;
      font-size: 15px;
      font-weight: normal;
      line-height: 1.5;
    }

    .border {
      border-top: 1px solid #e5e5e5;
      margin-top: 20px;
      padding-top: 20px;
    }
  `,
  template(this: DescriptionListComponent) {
    return html`
      <div class="container" part="container">
        <slot name="description" class="description" part="description"></slot>
        <slot name="text" class="text" part="text"></slot>
        <div class="border" part="border"></div>
      </div>
    `;
  },
})
export class DescriptionListComponent extends LitElement {}
```

#### Modifiers

What is a modifier ?

In order to apply some logic before current template is loaded like custom directives, we need to wrap current template and pass it along the actual modifier template

```typescript
@Component({
  selector: 'my-modifier',
  template() {
    return html`<slot></slot>`;
  },
})
export class MyModifier extends LitElement {
  OnUpdate() {
    const slot = this.shadowRoot.querySelector('slot');
    for (const element of [...slot.assignedElements()]) {
      /// Do something here with element
    }
  }

  public static modifier(template: TemplateResult) {
    return html`<my-modifier>${template}</my-modifier>`;
  }
}
```

Another real example is to add FlexLayout modifier from `@rhtml/modifiers` which will apply useful directives
to be used inside of the html inspired from Angular flex-layout https://github.com/angular/flex-layout/wiki/Declarative-API-Overview

```typescript
import { Component, css, html, LitElement } from '@rxdi/lit-html';

import { FlexLayout } from '@rhtml/modifiers';

/**
 * @customElement home-component
 */
@Component({
  selector: 'home-component',
  style: css`
    .block {
      background: red;
      flex: 1;
    }
    .container {
      height: 200px;
    }
  `,
  modifiers: [FlexLayout],
  template(this: HomeComponent) {
    return html`
      <div class="container" fxLayout="row" fxLayoutGap="10px">
        <div>
          <div class="block" fxLayoutAlign="center center" fxFlexFill>A</div>
        </div>
        <div>
          <div class="block" fxLayoutAlign="center center" fxFlexFill>B</div>
        </div>
        <div>
          <div class="block" fxLayoutAlign="center center" fxFlexFill>C</div>
        </div>
        <div>
          <div class="block" fxLayoutAlign="center center" fxFlexFill>D</div>
        </div>
      </div>
    `;
  },
})
export class HomeComponent extends LitElement {}
```

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