Added Lit with decorators usage example (withastro#8270)

* Added Lit with TypeScript example * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger <[email protected]> * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger <[email protected]> * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger <[email protected]> * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger <[email protected]> * Update src/content/docs/en/guides/integrations-guide/lit.mdx Co-authored-by: Sarah Rainsberger <[email protected]> --------- Co-authored-by: Sarah Rainsberger <[email protected]>
wpplumber · May 15, 2024 · 1effd1b · 1effd1b
1 parent da71c4f
commit 1effd1b
Showing 1 changed file with 28 additions and 0 deletions.
diff --git 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`<p>Hello world! From ${this.name}</p>`;
+    }
+}
+```
+
 ### 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).