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.