Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(zh-cn): Update lit.mdx #8277

Merged
merged 2 commits into from
May 15, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading