Skip to content

Commit

Permalink
i18n(zh-cn): Update lit.mdx (withastro#8277)
Browse files Browse the repository at this point in the history
Co-authored-by: liruifengv <liruifeng1024@gmail.com>
  • Loading branch information
2 people authored and wpplumber committed May 15, 2024
1 parent e88f0a9 commit 67f7b00
Showing 1 changed file with 28 additions and 0 deletions.
28 changes: 28 additions & 0 deletions src/content/docs/zh-cn/guides/integrations-guide/lit.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`<p>你好世界!来自 ${this.name}</p>`;
}
}
```

### Polyfills 与水合

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

0 comments on commit 67f7b00

Please sign in to comment.