通过创建一个继承 LitElement 的类并将其注册到浏览器来定义一个 Lit 组件：

@customElement('word-viewer')
export class WordViewer extends LitElement { /* ... */ }

export class WordViewer extends LitElement { /* ... */  }
customElements.define('word-viewer', WordViewer);

TypeScript 的 @customElement 装饰器是调用 customElements.define 的简写形式，它将自定义元素类注册到浏览器，并将其与自定义元素名称 word-viewer 关联起来。

customElements.define 将自定义元素类注册到浏览器，并将其与自定义元素名称 word-viewer 关联起来。

这是为了确保与未来添加到 HTML 或 SVG 中的标签向前兼容，因为未来的标签不会包含带连字符的元素。

渲染

Lit 组件的 render() 方法返回一个模板。Lit 模板使用 html 标签模板字符串，可以在 JavaScript 中无需构建步骤直接运行。

添加一个模板来定义 word-viewer 应该渲染的内容：

import { html, LitElement } from 'lit';
...

  render() {
    return html`<pre>A super expressive and efficient template!</pre>`
  }

提供良好的 TypeScript 类型

如果使用 TypeScript，你可以在 HTMLElementTagNameMap 上注册你的自定义元素。

declare global {
  interface HTMLElementTagNameMap {
    "word-viewer": WordViewer;
  }
}

这样做可以让 TypeScript 将 document.createElement('word-viewer') 的类型推断为你的 WordViewer 类。

你应该能在预览中看到 A super expressive and efficient template! 的渲染结果。