Icard/angular-clarity-master(work.../node_modules/lit
realSnehal 400e0876de frontend 2024-07-16 20:25:36 +05:30
..
decorators frontend 2024-07-16 20:25:36 +05:30
development frontend 2024-07-16 20:25:36 +05:30
directives frontend 2024-07-16 20:25:36 +05:30
node_modules frontend 2024-07-16 20:25:36 +05:30
LICENSE frontend 2024-07-16 20:25:36 +05:30
README.md frontend 2024-07-16 20:25:36 +05:30
async-directive.d.ts frontend 2024-07-16 20:25:36 +05:30
async-directive.d.ts.map frontend 2024-07-16 20:25:36 +05:30
async-directive.js frontend 2024-07-16 20:25:36 +05:30
async-directive.js.map frontend 2024-07-16 20:25:36 +05:30
decorators.d.ts frontend 2024-07-16 20:25:36 +05:30
decorators.d.ts.map frontend 2024-07-16 20:25:36 +05:30
decorators.js frontend 2024-07-16 20:25:36 +05:30
decorators.js.map frontend 2024-07-16 20:25:36 +05:30
directive-helpers.d.ts frontend 2024-07-16 20:25:36 +05:30
directive-helpers.d.ts.map frontend 2024-07-16 20:25:36 +05:30
directive-helpers.js frontend 2024-07-16 20:25:36 +05:30
directive-helpers.js.map frontend 2024-07-16 20:25:36 +05:30
directive.d.ts frontend 2024-07-16 20:25:36 +05:30
directive.d.ts.map frontend 2024-07-16 20:25:36 +05:30
directive.js frontend 2024-07-16 20:25:36 +05:30
directive.js.map frontend 2024-07-16 20:25:36 +05:30
experimental-hydrate-support.d.ts frontend 2024-07-16 20:25:36 +05:30
experimental-hydrate-support.d.ts.map frontend 2024-07-16 20:25:36 +05:30
experimental-hydrate-support.js frontend 2024-07-16 20:25:36 +05:30
experimental-hydrate-support.js.map frontend 2024-07-16 20:25:36 +05:30
experimental-hydrate.d.ts frontend 2024-07-16 20:25:36 +05:30
experimental-hydrate.d.ts.map frontend 2024-07-16 20:25:36 +05:30
experimental-hydrate.js frontend 2024-07-16 20:25:36 +05:30
experimental-hydrate.js.map frontend 2024-07-16 20:25:36 +05:30
html.d.ts frontend 2024-07-16 20:25:36 +05:30
html.d.ts.map frontend 2024-07-16 20:25:36 +05:30
html.js frontend 2024-07-16 20:25:36 +05:30
html.js.map frontend 2024-07-16 20:25:36 +05:30
index.d.ts frontend 2024-07-16 20:25:36 +05:30
index.d.ts.map frontend 2024-07-16 20:25:36 +05:30
index.js frontend 2024-07-16 20:25:36 +05:30
index.js.map frontend 2024-07-16 20:25:36 +05:30
logo.svg frontend 2024-07-16 20:25:36 +05:30
package.json frontend 2024-07-16 20:25:36 +05:30
polyfill-support.d.ts frontend 2024-07-16 20:25:36 +05:30
polyfill-support.d.ts.map frontend 2024-07-16 20:25:36 +05:30
polyfill-support.js frontend 2024-07-16 20:25:36 +05:30
polyfill-support.js.map frontend 2024-07-16 20:25:36 +05:30
static-html.d.ts frontend 2024-07-16 20:25:36 +05:30
static-html.d.ts.map frontend 2024-07-16 20:25:36 +05:30
static-html.js frontend 2024-07-16 20:25:36 +05:30
static-html.js.map frontend 2024-07-16 20:25:36 +05:30

README.md

Lit

Simple. Fast. Web Components.

Build Status Published on npm Join our Discord Mentioned in Awesome Lit

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

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

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:

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

Contributing

Please see CONTRIBUTING.md.