open-index/open-npm huggingface dataset:
npm package: @lit-async/lit
Description: A library for building fast, lightweight web components
Author: Google LLC
Latest version: 2.4.1-mirror.4

<div align="center">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./logo-dark.svg" alt="Lit" width="300" height="141">
  </source>
  <source media="(prefers-color-scheme: light)" srcset="./logo.svg" alt="Lit" width="300" height="141">
  </source>
  <img src="./logo.svg" alt="Lit" width="300" height="141">
</picture>

### Simple. Fast. Web Components.

[![Build Status](https://github.com/lit/lit/actions/workflows/tests.yml/badge.svg)](https://github.com/lit/lit/actions/workflows/tests.yml)
[![Published on npm](https://img.shields.io/npm/v/lit.svg?logo=npm)](https://www.npmjs.com/package/lit)
[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)

</div>

Lit is a simple library for building fast, lightweight web components.

At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

## Documentation

See the full documentation for Lit at [lit.dev](https://lit.dev)

## About this release

This is a stable release of Lit 2.0. If upgrading from previous versions of `lit-element` or `lit-html`, please see the [Upgrade Guide](https://lit.dev/docs/releases/upgrade/) for a step-by-step guide on upgrading.

## Overview

Lit provides developers with just the right tools to build fast web components:

- A fast declarative HTML template system
- Reactive property declarations
- A customizable reactive update lifecycle
- Easy to use scoped CSS styling

Lit builds on top of standard web components, and makes them easier to write:

```ts
import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

// Registers the element
@customElement('my-element')
export class MyElement extends LitElement {
  // Styles are applied to the shadow root and scoped to this element
  static styles = css`
    span {
      color: green;
    }
  `;

  // Creates a reactive property that triggers rendering
  @property()
  mood = 'great';

  // Render the component's DOM by returning a Lit template
  render() {
    return html`Web Components are <span>${this.mood}</span>!`;
  }
}
```

Once you've defined your component, you can use it anywhere you use HTML:

```html
<my-element mood="awesome"></my-element>
```

## Contributing

Please see [CONTRIBUTING.md](../../CONTRIBUTING.md).
npm package: @lit-async/lit-element
Description: A simple base class for creating fast, lightweight web components
Author: Google LLC
Latest version: 3.2.2-mirror.4

# LitElement 3.0

A simple base class for creating fast, lightweight web components.

[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
[![Published on npm](https://img.shields.io/npm/v/lit-element/next)](https://www.npmjs.com/package/lit-element)
[![Join our Slack](https://img.shields.io/badge/slack-join%20chat-4a154b.svg)](https://www.polymer-project.org/slack-invite)
[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)

LitElement is the base class that powers the [Lit](https://lit.dev) library for building fast web components. Most users should import `LitElement` from the [`lit`](https://www.npmjs.com/package/lit) package rather than installing and importing from the `lit-element` package directly.

## About this release

This is a stable release of `lit-element` 3.0.0 (part of the Lit 2.0 release). If upgrading from previous versions of `lit-element`, please see the [Upgrade Guide](https://lit.dev/docs/releases/upgrade/) for a step-by-step guide on upgrading.

## Documentation

Full documentation is available at [lit.dev](https://lit.dev).

## Contributing

Please see [CONTRIBUTING.md](../../CONTRIBUTING.md).
npm package: @lit-async/lit-html
Description: HTML templates literals in JavaScript
Author: Google LLC
Latest version: 2.4.0-mirror.4

# lit-html 2.0

Efficient, Expressive, Extensible HTML templates in JavaScript

[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
[![Published on npm](https://img.shields.io/npm/v/lit-html/next)](https://www.npmjs.com/package/lit-html)
[![Join our Slack](https://img.shields.io/badge/slack-join%20chat-4a154b.svg)](https://www.polymer-project.org/slack-invite)
[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)

lit-html is the template system that powers the [Lit](https://lit.dev) library for building fast web components. When using `lit-html` to develop web components, most users should import lit-html via the [`lit`](https://www.npmjs.com/package/lit) package rather than installing and importing from `lit-html` directly.

## About this release

This is a stable release of `lit-html` 2.0 (part of the Lit 2.0 release). If upgrading from previous versions of `lit-html`, please note the minor breaking changes from lit-html 1.0 in the [Upgrade Guide](https://lit.dev/docs/releases/upgrade/).

## Documentation

Full documentation is available at [lit.dev](https://lit.dev).

## Overview

`lit-html` lets you write [HTML templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) in JavaScript with [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).

lit-html templates are plain JavaScript and combine the familiarity of writing HTML with the power of JavaScript. lit-html takes care of efficiently rendering templates to DOM, including efficiently updating the DOM with new values.

```javascript
import {html, render} from 'lit-html';

// This is a lit-html template function. It returns a lit-html template.
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;

// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body);

// This updates to <div>Hello Kevin!</div>, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);
```

`lit-html` provides two main exports:

- `html`: A JavaScript [template tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) used to produce a `TemplateResult`, which is a container for a template, and the values that should populate the template.
- `render()`: A function that renders a `TemplateResult` to a DOM container, such as an element or shadow root.

## Installation

```bash
$ npm install lit-html
```

Or use from `lit`:

```bash
$ npm install lit
```

## Contributing

Please see [CONTRIBUTING.md](../../CONTRIBUTING.md).
npm package: @lit-async/localize
Description: Localization client library for lit-html
Author: Google LLC
Latest version: 0.11.4

# @lit/localize

[npm-img]: https://img.shields.io/npm/v/@lit/localize
[npm-href]: https://www.npmjs.com/package/@lit/localize
[test-img]: https://github.com/lit/lit/workflows/Tests/badge.svg?branch=main
[test-href]: https://github.com/lit/lit/actions?query=workflow%3ATests+branch%3Amain+event%3Apush

[![Published on NPM][npm-img]][npm-href]
[![Test status][test-img]][test-href]

Lit Localize provides localization/internationalization support for Lit
templates. See [lit.dev](https://lit.dev/docs/localization/overview/) for full
documentation.

This is the repo for `@lit/localize`, the package provides the library that runs in
the browser and contains `msg` and other utilities.

See also
[`@lit/localize-tools`](https://github.com/lit/lit/tree/main/packages/localize-tools),
the package that provides the `lit-localize` command-line tool for extracting
messages and building localized apps.

## Installation

```sh
npm i @lit/localize
```

## Usage

```js
render() {
  return msg(html`Hello <b>World</b>`);
}
```

## Documentation

Full documentation is available on
[lit.dev](https://lit.dev/docs/localization/overview/).
npm package: @lit-async/observers
Description: A set of reactive controllers that facilitate using the platform observer objects.
Author: Google LLC
Latest version: 1.1.0

# @lit-labs/observers

A set of reactive controllers that facilitate using the platform observer
objects, including:

- MutationObserver
- ResizeObserver
- IntersectionObserver
- PerformanceObserver

## Overview

The modern web platform provides a number of observer helpers that can be used
to detect changes to which web applications may want to react. By managing
one of these observers with a reactive controller, changes can be easily
integrated into the Lit reactive update lifecycle. The controller can also help
manage observer cleanup and rendering in response to changes.

## Installation

From inside your project folder, run:

```bash
$ npm install @lit-labs/observers
```

## Usage

Here's an example:

```ts
import {MutationController} from '@lit-labs/observers/mutation_controller.js';
// ...

class MyElement extends LitElement {
  private _observer = new MutationController(this, {
    config: {attributes: true},
  });

  render() {
    return html` ${this._observer.value ? `Attributes set!` : ``} `;
  }
}
```

## Contributing

Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).
npm package: @lit-async/scoped-registry-mixin
Description: A mixin for using speculative "scoped CustomElementRegistry" with LitElement.
Author: Google LLC
Latest version: 1.0.1

# @lit-labs/scoped-registry-mixin

`ScopedRegistryHost` mixin for `LitElement` that integrates with the speculative [Scoped CustomElementRegistry polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry).

🚨 **Warning: Scoped Custom Element Registries is a proposed browser API. It has not been finalized nor shipped in any browser.** This mixin is provided to evaluate the proposal and facilitate feedback. **Use this feature, and the polyfill in production code at your own risk.**

## Overview

The [Scoped Custom Element Registries](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md) WICG proposal introduces new APIs for scoping custom element definitions to shadow roots, such that the mapping of tag names to custom element class doesn't rely on a single global registry.

When new elements are created within a shadow root with a scoped custom element registry, the browser will use the scoped registry rather than the global registry to look up custom element definitions. When using a scoped element registry, all used custom element elements must be defined within that scope.

`ScopedRegistryHost` adds the following features to LitElement:

1. Automatically creates a scoped CustomElementRegistry for the class
2. Provides sugar for defining custom elements in the scoped registry
3. Passes the registry to `attachShadow()` to enable scoping
4. Passes the shadow root to lit-html to create DOM within the scope

A speculative [Scoped CustomElementRegistry polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry) is being developed. Because the proposal is not implemented natively, `ScopedRegistryHost` requires the polyfill.

## Usage

The mixin adds a declarative `static elementDefinitions` property for declaring the custom elements to be scoped locally to its Shadow DOM.

Basic usage is as follows:

```js
import {LitElement, html} from 'lit';
import {ScopedRegistryHost} from '@lit-labs/scoped-registry-mixin';

import {SimpleGreeting} from './simple-greeting.js';

class ScopedComponent extends ScopedRegistryHost(LitElement) {
  // Elements here will be registered against the tag names provided only
  // in the shadow root for this element
  static elementDefinitions = {
    'simple-greeting': SimpleGreeting,
  };

  render() {
    return html` <simple-greeting
      id="greeting"
      name="scoped world"
    ></simple-greeting>`;
  }
}
```

## Contributing

Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).
npm package: @lit-async/ssr-client
Description: Client package for @lit-labs/ssr.
Author: Google LLC
Latest version: 1.0.1-mirror.4

# @lit-labs/ssr-client

A set of client-side support modules for rendering Lit components and templates
on the server using `@lit-labs/ssr`.

## Overview

Package contents:

- `directives/render-light.js`: A child-position directive that invokes and
  renders the parent custom element's `renderLight` method as its value.

## Contributing

Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).
npm package: @lit-async/task
Description: A controller for Lit that renders asynchronous tasks.
Author: Google LLC
Latest version: 2.0.0-mirror.4

# @lit-labs/task

A controller for Lit that renders asynchronous tasks.

## Overview

Often a Lit element needs to request, process, and render remote data, for
example when querying a REST API for data to be displayed. The `Task`
controller provides a simple pattern for encapsulating this behavior in an
easily reusable way. The controller integrates with a host Lit element. The
user provides a task function and an arguments function. Whenever the element
updates, the arguments are checked and if any have changed, the task is
initiated.

Sometimes it's important to control exactly when a task runs. For example,
task arguments may have changed, but it should not run until an interaction
event like a button click. For these types of use cases, the `autoRun` option
can be set to `false`. This setting can be passed in the task configuration
and/or be set on the `Task` itself. It defaults to `true`, but when `autoRun`
is `false`, the task does not run automatically when arguments change.
Instead, it can be run explicitly by calling `run(arg?)`. By default, `run()`
uses the task's configured arguments function, but a custom array of arguments
may be optionally passed.

The controller requests an update of the element whenever the task
status changes. Task status is provided via the `TaskStatus` object which has
values for `INITIAL`, `PENDING`, `COMPLETE`, and `ERROR`. The task result is
available via its `value` property, or via the `error` property when an error
occurs. The task `render` method may also be used to easily render different
task states. It accepts an object which optionally can implement methods for
`initial`, `pending`, `complete(value)`, and `error(error)`. These methods
typically return a Lit `TemplateResult` to render.

## Installation

From inside your project folder, run:

```bash
$ npm install @lit-labs/task
```

## Usage

Here's an example:

```ts
import {Task, TaskStatus} from '@lit-labs/task';
// ...

class MyElement extends LitElement {
  @state()
  private _userId: number = -1;

  private _apiTask = new Task(
    this,
    ([userId]) =>
      fetch(`//example.com/api/userInfo?${userId}`).then((response) =>
        response.json()
      ),
    () => [this._userId]
  );

  render() {
    return html`
      <div>User Info</div>
      ${this._apiTask.render({
        pending: () => html`Loading user info...`,
        complete: (user) => html`${user.name}`,
      })}
      <!-- ... -->
    `;
  }
}
```

## Contributing

Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).