From 1effd1b90c5fee4437c4465199ce75d04f81c01a Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 14 May 2024 21:18:16 +0800 Subject: [PATCH] Added Lit with decorators usage example (#8270) * Added Lit with TypeScript example * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger --------- Co-authored-by: Sarah Rainsberger --- .../docs/en/guides/integrations-guide/lit.mdx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index feb3b4f759ea6..82d4c74e24049 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -126,6 +126,34 @@ import { MyElement } from '../components/my-element.js'; Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You *might* run into libraries that work incorrectly because of this. ::: +### Experimental Decorators + +To use [experimental decorators in Lit](https://lit.dev/docs/components/decorators/), add the following to your `tsconfig.json` file: + +```json title="tsconfig.json" add={3} +{ + "compilerOptions": { + "experimentalDecorators": true, + } +} +``` + +This allows you to use experimental decorators such as `@customElement` and `@state` to register a custom element and define a state property in your Lit component: + +```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`

Hello world! From ${this.name}

`; + } +} +``` + ### Polyfills & Hydration The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about *1.5kB*. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).