定义组件

通过创建一个继承自 LitElement 的类并在浏览器中注册你的类来定义一个 Lit 组件：

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement { /* ... */ }

@customElement 装饰器是调用 customElements.define 的简写方式，它将一个自定义元素类注册到浏览器，并将其与一个元素名称关联（在本例中是 simple-greeting）。

如果你使用的是 JavaScript，或者你没有使用装饰器，可以直接调用 define()：

export class SimpleGreeting extends LitElement { /* ... */  }
customElements.define('simple-greeting', SimpleGreeting);

当你定义一个 Lit 组件时，你实际上是在定义一个自定义 HTML 元素。因此你可以像使用任何内置元素一样使用这个新元素：

<simple-greeting name="Markup"></simple-greeting>

const greeting = document.createElement('simple-greeting');

LitElement 基类是 HTMLElement 的子类，因此 Lit 组件继承了所有标准的 HTMLElement 属性和方法。

具体来说，LitElement 继承自 ReactiveElement，后者实现了响应式属性，而 ReactiveElement 又继承自 HTMLElement。

TypeScript 会根据标签名推断从某些 DOM API 返回的 HTML 元素的类。例如，document.createElement('img') 返回一个具有 src: string 属性的 HTMLImageElement 实例。

自定义元素可以通过以下方式添加到 HTMLElementTagNameMap 来获得同样的类型支持：

@customElement('my-element')
export class MyElement extends LitElement {
  @property({type: Number})
  aNumber: number = 5;
  /* ... */
}

declare global {
  interface HTMLElementTagNameMap {
    "my-element": MyElement;
  }
}

这样做之后，以下代码可以正确通过类型检查：

const myElement = document.createElement('my-element');
myElement.aNumber = 10;

我们建议为所有用 TypeScript 编写的元素添加 HTMLElementTagNameMap 条目，并确保在你的 npm 包中发布 .d.ts 类型定义。