lit/lit-element
Fork: 330 Star: 4490 (更新于 1970-01-01 00:00:00)
license: BSD-3-Clause
Language: TypeScript .
LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
最后发布版本: v2.4.0 ( 2020-08-20 05:39:49)
LitElement
LitElement is simple base class for creating fast, lightweight web components with lit-html.
Looking for Lit?
LitElement is now part of the Lit library monorepo. Lit 2 includes lit-html 2.x and LitElement 3.x.
This repo contains the code for LitElement 2.x.
Documentation
For LitElement 2.x documentation, see the legacy documentation site.
For Lit 2, the next version of LitElement and lit-html, see the Lit site.
Overview
LitElement uses lit-html to render into the
element's Shadow DOM
and adds API to help manage element properties and attributes. LitElement reacts to changes in properties
and renders declaratively using lit-html
. See the lit-html guide
for additional information on how to create templates for lit-element.
import {LitElement, html, css, customElement, property} from 'lit-element';
// This decorator defines the element.
@customElement('my-element')
export class MyElement extends LitElement {
// This decorator creates a property accessor that triggers rendering and
// an observed attribute.
@property()
mood = 'great';
static styles = css`
span {
color: green;
}`;
// Render element DOM by returning a `lit-html` template.
render() {
return html`Web Components are <span>${this.mood}</span>!`;
}
}
<my-element mood="awesome"></my-element>
Note, this example uses decorators to create properties. Decorators are a proposed standard currently available in TypeScript or Babel. LitElement also supports a vanilla JavaScript method of declaring reactive properties.
Examples
-
Runs in browsers with JavaScript Modules: Stackblitz, JSFiddle, JSBin, CodePen.
-
You can also copy this HTML file into a local file and run it in any browser that supports JavaScript Modules.
Installation
From inside your project folder, run:
$ npm install lit-element
To install the web components polyfills needed for older browsers:
$ npm i -D @webcomponents/webcomponentsjs
Supported Browsers
The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.
Edge and Internet Explorer 11 require the web components polyfills.
Forward Compatibility With Lit 2
Lit 2 (LitElement 3.0) has a few breaking changes and deprecations that have been back-ported to LitElement 2.5 in order to ease upgrading.
To prepare for Lit 2, update these APIs:
LitElement 2.4 | LitElement 2.5/Lit 2 |
---|---|
Decorator imports:import {customElement} from 'lit-element'; |
import {customElement} from 'lit-element/decorators.js'; |
@internalProperty() foo; |
@state() foo; |
Override _getUpdateComplete() |
Override getUpdateComplete() |
Shadow root options: Override createRenderRoot() . |
Add static shadowRootOptions . |
import {UpdatingElement} from 'lit-element'; |
import {ReactiveElement} from 'lit-element'; |
Contributing
Please see CONTRIBUTING.md.
最近版本更新:(数据更新于 1970-01-01 00:00:00)
2020-08-20 05:39:49 v2.4.0
2020-03-20 09:00:14 v2.3.1
2020-03-20 00:00:23 v2.3.0
2019-03-22 03:09:17 v2.1.0
2019-02-06 03:15:53 v2.0.1
2019-02-06 02:54:41 v2.0.0
2018-12-01 04:56:59 v0.6.4
2018-11-09 09:48:15 v0.6.3
2018-11-09 09:47:30 v0.6.2
2018-09-18 08:38:54 0.6.1
lit/lit-element同语言 TypeScript最近更新仓库
2024-12-22 15:05:26 elizaOS/eliza
2024-12-21 21:40:12 lobehub/lobe-chat
2024-12-21 12:01:51 siyuan-note/siyuan
2024-12-21 09:15:35 MetaCubeX/metacubexd
2024-12-21 04:50:26 mediar-ai/screenpipe
2024-12-20 19:36:48 vitejs/vite