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

Added Lit with decorators usage example #8270

Merged
merged 7 commits into from
May 14, 2024
28 changes: 28 additions & 0 deletions src/content/docs/en/guides/integrations-guide/lit.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
Loading