---
title: "From Lit"
description: "For developers who know Lit: each topic of Lit's documentation, with the TypeScript you know next to the Firelight F# that does the same."
---

# From Lit

For developers who know Lit. Each page takes a topic from Lit's documentation, in its order, and puts the TypeScript you know next to the F# that does the same thing.

- [Lit docs](https://lit.dev/docs/)

Firelight binds Lit itself, so the runtime is the same: the same `LitElement`, the same update
cycle, the same template syntax. What changes is the language around it. These are the
differences you meet on every page:

- A component is an F# class that inherits `LitElement`, marked `[<AttachMembers>]` so that
  [Fable](https://fable.io/) puts its members on the JavaScript class, where Lit looks for them.
- F# has no decorators. Registration is a call to `defineElement`, and property options go in a
  `static member properties`, as in Lit without decorators.
- A template hole is `{value}` in an F# interpolated string, where TypeScript has `${value}`.
- Members name their own `this`: `override this.render() = ...`.
- Imports become `open` declarations. `open type Firelight.Lit` brings in `html`, `css`, `nothing`
  and the directives.

Each pair of code blocks, Lit's TypeScript and Firelight's F#, does exactly the same thing. The
TypeScript uses Lit's decorators with `experimentalDecorators: true` and
`useDefineForClassFields: false`, the settings Lit's own examples assume. Each page ends with what
doesn't carry over directly, and with the Lit features Firelight doesn't bind yet.

## Topics

- [Components](https://roboz0r.github.io/Firelight/from-lit/components/): defining, rendering and reactive properties.
- [Styles](https://roboz0r.github.io/Firelight/from-lit/styles/): static styles, sharing them, and shadow DOM.
- [Lifecycle](https://roboz0r.github.io/Firelight/from-lit/lifecycle/): connecting, the update cycle and `changedProperties`.
- [Events](https://roboz0r.github.io/Firelight/from-lit/events/): listening, dispatching custom events and listening on the element.
- [Decorators](https://roboz0r.github.io/Firelight/from-lit/decorators/): what each Lit decorator becomes in F#.
- [Templates](https://roboz0r.github.io/Firelight/from-lit/templates/): expressions, conditionals, lists, directives and static
  values.
- [Composition](https://roboz0r.github.io/Firelight/from-lit/composition/): reactive controllers, and what replaces mixins.
- [Context](https://roboz0r.github.io/Firelight/from-lit/context/): providing and consuming values with `@lit/context`.
- [Tasks](https://roboz0r.github.io/Firelight/from-lit/tasks/): async work with `@lit/task`.
- [Signals](https://roboz0r.github.io/Firelight/from-lit/signals/): shared reactive state with `@lit-labs/signals`.

## Beyond these pages

Some of Lit's documentation needs no F# version, or has none yet:

- **Server rendering.** Lit SSR runs in Node, so it can prerender Firelight components at build
  time, as this site does; see [Prerendering](https://roboz0r.github.io/Firelight/guides/prerendering/). A .NET server can't render
  them.
- **Localization.** `@lit/localize` isn't bound. Its tooling reads TypeScript or JavaScript
  source, not F#.
- **React.** `@lit/react` isn't bound. Firelight components are custom elements, so any
  framework that supports custom elements can use them.
- **Tools.** Vite, bundling and publishing work as in Lit; Fable compiles the F# to JavaScript
  modules first. [Get started](https://roboz0r.github.io/Firelight/start/) sets this up.