0

lit-element

一个用于创建快速、轻量级 web 组件的简单基类。（A simple base class for creating fast, lightweight web components）

官方網站
Github 資源庫
主要指標
  • 所有者: lit/lit-element
  • 平台: Cross-platform, Web browsers
  • 許可證: BSD 3-Clause "New" or "Revised" License
  • 分類:
  • 主題:
  • 喜歡:
    5
      比較:

Github星跟蹤圖

LitElement

一个简单的基类，用于使用 lit-html 创建快速，轻量级的 Web 组件。

文献资料

完整文档可在 lit-element.polymer-project.org 中找到。

总览

LitElement 使用 lit-html 渲染到元素的 Shadow DOM 中，并添加了 API 以帮助管理元素的属性和属性。 LitElement 对属性更改做出反应，并使用 lit-html 进行声明式渲染。 有关如何为 lit-element 创建模板的其他信息，请参见 lit-html 指南。 

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>

注意，此示例使用装饰器创建属性。 装饰器是当前在 TypeScript 或 Babel 中可用的提议标准。 LitElement 还支持声明反应特性的 vanilla JavaScript 方法。

示例

安装

从项目文件夹中运行 

$ npm install lit-element

安装旧浏览器所需的 web 组件 polyfills

$ npm i -D @webcomponents/webcomponentsjs

受支持的浏览器

支持所有现代浏览器的最后两个版本，包括Chrome、Safari、Opera、Firefox和Edge。此外，还支持Internet Explorer 11。

Edge和Internet Explorer 11需要 web 组件 polyfills。

贡献

请查看 CONTRIBUTING.md。

主要指標

概覽
名稱與所有者lit/lit-element
主編程語言TypeScript
編程語言TypeScript (語言數: 3)
平台Cross-platform, Web browsers
許可證BSD 3-Clause "New" or "Revised" License
所有者活动
創建於2017-09-02 19:09:16
推送於2025-06-03 06:19:42
最后一次提交2022-02-03 12:09:17
發布數27
最新版本名稱v2.4.0 (發布於 )
第一版名稱v0.3.0 (發布於 2018-04-19 13:03:05)
用户参与
星數4.5k
關注者數143
派生數318
提交數1k
已啟用問題?
問題數713
打開的問題數0
拉請求數344
打開的拉請求數47
關閉的拉請求數133
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?

LitElement

A simple base class for creating fast, lightweight web components with lit-html.

Build Status
Published on npm
Join our Slack
Published on webcomponents.org
Mentioned in Awesome lit-html
BrowserStack Status

Documentation

Full documentation is available at lit-element.polymer-project.org.

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

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.

Contributing

Please see CONTRIBUTING.md.