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).