\`, document.getElementById('app'));` }, custom: { name: '空白模板', code: `import { LitElement, html, css } from 'lit'; class MyComponent extends LitElement { static styles = css\` :host { display: block; padding: 24px; font-family: system-ui, sans-serif; text-align: center; } \`; static properties = { // 在此声明反应式属性 message: { type: String } }; constructor() { super(); this.message = 'Hello Lit! 🚀'; } render() { return html\`

\${this.message}

开始编写你的 Lit 组件吧！

\`; } } customElements.define('my-component', MyComponent); import { render } from 'lit'; render(html\`\`, document.getElementById('app'));` } }; // DOM 元素 const $editor = $('#lit-code-editor'); const $lineNumbers = $('#lit-line-numbers'); const $iframe = $('#lit-preview-iframe'); const $placeholder = $('#lit-placeholder'); const $outputArea = $('#lit-output-area'); const $outputEntries = $('#lit-output-entries'); const $templateSelect = $('#lit-template-select'); const $autoRunCheckbox = $('#lit-auto-run'); const $previewStatus = $('#lit-preview-status'); let currentBlobUrl = null; let autoRunTimer = null; let outputMessages = []; // 初始化：从 localStorage 恢复代码 function getSavedCode() { const saved = localStorage.getItem(STORAGE_KEY); if (saved && saved.trim()) return saved; return templates['counter'].code; } function saveCode(code) { try { localStorage.setItem(STORAGE_KEY, code); } catch (e) { /* storage full, ignore */ } } // 更新行号 function updateLineNumbers() { const lines = $editor.val().split('\n').length; const currentLines = $lineNumbers.text().split('\n').filter(l => l.trim()).length; if (lines !== currentLines) { $lineNumbers.text(Array.from({ length: lines }, (_, i) => i + 1).join('\n')); } } // 同步滚动 function syncScroll() { $lineNumbers.scrollTop($editor.scrollTop()); } // 构建 iframe HTML function buildIframeHtml(userCode) { return ` Lit Preview
无需登录 数据私有 本地保存

Lit 组件快速实验场 - 在线编写 Lit 模板与反应式属性

Web Components 开发工具 Lit 模板 试验
10
0
0
0
Lit 实验场
Ctrl+Enter
📄 component.js
1
实时预览 就绪
点击「运行」查看组件效果
控制台输出

常见问题与知识点

什么是 Lit？

Lit 是 Google 推出的轻量级 Web Components 库，基于 lit-html 模板引擎和 LitElement 基类，让开发者能够快速构建高性能、可复用的 Web 组件。它使用原生浏览器 API，无需额外编译即可运行。

什么是反应式属性（Reactive Properties）？

反应式属性是 Lit 的核心特性。通过 static properties 声明属性，当属性值变化时，组件会自动重新渲染。属性支持类型转换（String, Number, Boolean, Array, Object），并可配置 attribute 反射。

如何在浏览器中直接使用 Lit？

使用 ES 模块导入和 Import Map：<script type="importmap">{"imports":{"lit":"https://cdn.jsdelivr.net/npm/lit@3/+esm"}}</script>，然后即可 import {LitElement, html, css} from 'lit';。

Lit 与 React/Vue 有何不同？

Lit 基于原生 Web Components 标准，组件可在任何框架中使用。它更轻量（~5KB gzip），使用原生 Shadow DOM 进行样式隔离，不依赖虚拟 DOM，直接操作 DOM 更新，性能更优。

@property 装饰器 vs static properties？

装饰器需要 TypeScript 或 Babel 编译。在浏览器原生环境中，推荐使用 static properties = { ... } 静态属性方式声明反应式属性，这是 Lit 3 的标准做法。

Lit 组件的生命周期有哪些？

主要包括：connectedCallback（挂载）、disconnectedCallback（卸载）、willUpdate（更新前）、updated（更新后）、firstUpdated（首次更新后）、render（渲染）。

如何在 Lit 中绑定事件？

使用 @event 语法：html`<button @click=${this.handleClick}>点击</button>`。Lit 会自动处理事件绑定和解绑，支持所有标准 DOM 事件。

Lit 样式如何隔离？

Lit 组件使用 Shadow DOM，static styles = css`...` 中定义的样式仅作用于组件内部，不会泄露到外部。使用 :host 选择器可设置组件宿主元素样式。

🔧 相关工具