简介

Gem 是一套使用 WebComponents 技术构建 WebApp 的轻量级 ECMAScript 库。 本质上说，你只是创建许多自定义元素，然后让他们协同工作，他们非常灵活，可以很容易的进行扩展，比如集成手势。 除了构建 WebApp，也可以利用 Gem 发布能独立工作的自定义元素（例如 GemPanel）。 自定义元素很容易在其他库中使用， 所以，Gem 也特别适用于构建 UI 组件库（例如 DuoyunUI）。

安装

npm install @mantou/gemimport * as Gem from 'https://esm.sh/@mantou/gem';<script src="https://unpkg.com/@mantou/gem/dist/gem.umd.js"></script>

开始

@customElement('my-element') class MyElement extends GemElement { render = () => { return html`<h1>Hello Gem</h1>`; } }<my-element></my-element>

装饰器 @customElement 使用标准的 API 定义一个自定义元素，然后以任何方式在 HTML 中使用他，当然也可以在其他自定义元素的模板中使用。

在 render 方法中返回渲染模版，Gem 将 lit-html 作为其模版引擎， 他使用 ES6 的模版字符串来编写标准 HTML 内容，没有其他概念，不存在编译时。

使用变量：

html`<div>${value}</div>`;

绑定 attribute 和 property：

html`<div title=${title} .data=${data}></div>`;

使用绑定事件

html`<div @click=${clickHandle}></div>`;

更详细的语法可以查看 lit-html 文档，另外，Gem 对模块语法的扩展请查看这里。

准备好了吗？

刚才只是介绍了 Gem 最基本的功能 —— 定义 Gem 元素，接下来将介绍开发一个反应性 WebApp 的其他部分。