From c3eb91b99c4f0d371752ad4732b2c1514618cb96 Mon Sep 17 00:00:00 2001 From: huyikai Date: Wed, 15 May 2024 16:26:33 +0800 Subject: [PATCH] i18n(zh-cn): Update `lit.mdx` (#8277) Co-authored-by: liruifengv --- .../zh-cn/guides/integrations-guide/lit.mdx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/content/docs/zh-cn/guides/integrations-guide/lit.mdx b/src/content/docs/zh-cn/guides/integrations-guide/lit.mdx index 8d2b0e8ea99f2..e63881c5ac55f 100644 --- a/src/content/docs/zh-cn/guides/integrations-guide/lit.mdx +++ b/src/content/docs/zh-cn/guides/integrations-guide/lit.mdx @@ -127,6 +127,34 @@ import { MyElement } from '../components/my-element.js'; Lit 需要浏览器全局变量,如 `HTMLElement` 和 `customElements`。因此,Lit 渲染器会在服务器上模拟这些全局变量,以便 Lit 可以运行。你 *可能* 会遇到一些因此而无法正常工作的库。 ::: +### Experimental Decorators + +要在 Lit 中使用 [experimental decorators](https://lit.dev/docs/components/decorators/),请在你的 `tsconfig.json` 文件中添加以下内容: + +```json title="tsconfig.json" add={3} +{ + "compilerOptions": { + "experimentalDecorators": true, + } +} +``` + +这使你可以使用如 `@customElement` 和 `@state` 这样的 `experimental decorators` 来注册自定义元素并在你的 Lit 组件中定义状态属性: + +```ts title="src/components/my-element.ts" +import { LitElement, html } from "lit"; +import { customElement, state } from "lit/decorators.js"; + +@customElement("my-element") +export class MyElement extends LitElement { + @state() name = "my-element"; + + override render() { + return html`

你好世界!来自 ${this.name}

`; + } +} +``` + ### Polyfills 与水合 渲染器会自动处理为不支持 Declarative Shadow DOM 的浏览器添加适当的 polyfill。polyfill 大约为 *1.5kB*。如果浏览器支持 Declarative Shadow DOM,则加载的字节数少于 250 字节(用于检测支持)。