|
%!s(int64=2) %!d(string=hai) anos | |
---|---|---|
.. | ||
decorators | %!s(int64=2) %!d(string=hai) anos | |
directives | %!s(int64=2) %!d(string=hai) anos | |
LICENSE | %!s(int64=2) %!d(string=hai) anos | |
README.md | %!s(int64=2) %!d(string=hai) anos | |
async-directive.d.ts | %!s(int64=2) %!d(string=hai) anos | |
async-directive.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
async-directive.js | %!s(int64=2) %!d(string=hai) anos | |
async-directive.js.map | %!s(int64=2) %!d(string=hai) anos | |
decorators.d.ts | %!s(int64=2) %!d(string=hai) anos | |
decorators.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
decorators.js | %!s(int64=2) %!d(string=hai) anos | |
decorators.js.map | %!s(int64=2) %!d(string=hai) anos | |
directive-helpers.d.ts | %!s(int64=2) %!d(string=hai) anos | |
directive-helpers.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
directive-helpers.js | %!s(int64=2) %!d(string=hai) anos | |
directive-helpers.js.map | %!s(int64=2) %!d(string=hai) anos | |
directive.d.ts | %!s(int64=2) %!d(string=hai) anos | |
directive.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
directive.js | %!s(int64=2) %!d(string=hai) anos | |
directive.js.map | %!s(int64=2) %!d(string=hai) anos | |
experimental-hydrate-support.d.ts | %!s(int64=2) %!d(string=hai) anos | |
experimental-hydrate-support.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
experimental-hydrate-support.js | %!s(int64=2) %!d(string=hai) anos | |
experimental-hydrate-support.js.map | %!s(int64=2) %!d(string=hai) anos | |
experimental-hydrate.d.ts | %!s(int64=2) %!d(string=hai) anos | |
experimental-hydrate.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
experimental-hydrate.js | %!s(int64=2) %!d(string=hai) anos | |
experimental-hydrate.js.map | %!s(int64=2) %!d(string=hai) anos | |
html.d.ts | %!s(int64=2) %!d(string=hai) anos | |
html.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
html.js | %!s(int64=2) %!d(string=hai) anos | |
html.js.map | %!s(int64=2) %!d(string=hai) anos | |
index.d.ts | %!s(int64=2) %!d(string=hai) anos | |
index.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
index.js | %!s(int64=2) %!d(string=hai) anos | |
index.js.map | %!s(int64=2) %!d(string=hai) anos | |
logo.svg | %!s(int64=2) %!d(string=hai) anos | |
package.json | %!s(int64=2) %!d(string=hai) anos | |
polyfill-support.d.ts | %!s(int64=2) %!d(string=hai) anos | |
polyfill-support.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
polyfill-support.js | %!s(int64=2) %!d(string=hai) anos | |
polyfill-support.js.map | %!s(int64=2) %!d(string=hai) anos | |
static-html.d.ts | %!s(int64=2) %!d(string=hai) anos | |
static-html.d.ts.map | %!s(int64=2) %!d(string=hai) anos | |
static-html.js | %!s(int64=2) %!d(string=hai) anos | |
static-html.js.map | %!s(int64=2) %!d(string=hai) anos |
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.
See the full documentation for Lit at lit.dev
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.
Lit provides developers with just the right tools to build fast web components:
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>
Please see CONTRIBUTING.md.