本交互式教程将帮助你入门 Lit，并了解构建快速、轻量级 Web Components 是多么简单。

教程的每一步都会介绍一两个 Lit 特性。使用交互式编辑器为起始代码示例添加特性，并预览输出。

如果某一步卡住了，点击 Solve 查看完成的代码，或点击 Reset 返回起始代码。编辑器显示了一个基本的 Lit 组件，类似于你将在后续步骤中创建的组件。现在，先试试 Solve 和 Reset 按钮。

你可以使用 TypeScript 或 JavaScript 完成本教程。通过点击编辑器角落和可切换代码示例中的 JS/TS 切换按钮来更改语言，如下所示：

// TypeScript 爱好者的 TypeScript！
const items: Array<string> | undefined;

// JavaScript 爱好者的 JavaScript！
const items;

切换按钮是联动的，因此复制粘贴的代码示例应始终与编辑器中的语言匹配。你可以随时切换，但请注意，如果切换语言，你将丢失在编辑器中所做的任何更改。

Lit 组件是 Web Components，因此它们的行为类似于普通 HTML 元素。你可以使用简单的 HTML 标签将它们添加到页面中，如下所示：

<my-element></my-element>

查看代码编辑器中的 index.html，了解示例 Lit 组件是如何添加到页面中的。

你也可以查阅我们的文档以获取更多信息。