English for Lit Developers

Lit discussions revolve around the promise of framework-agnostic components, so the vocabulary needs to cover reactive state, encapsulation boundaries, and the interoperability questions that come up when Lit components sit inside a React or Vue app.

Key Vocabulary

Reactive property — a class field decorated so that changes automatically trigger a re-render, Lit’s equivalent of state in other frameworks, declared directly on the custom element class. “Mark that field as a reactive property instead of a plain class field — otherwise updating it won’t trigger a re-render.”

Shadow DOM encapsulation — the browser-native boundary Lit components use by default, scoping styles and markup so they don’t leak into or get affected by the surrounding page. “Shadow DOM encapsulation means our component’s CSS can’t accidentally override styles in the host application, and vice versa.”

Light DOM — content passed into a Lit component via slots, rendered in the regular document tree rather than inside the shadow root, relevant for styling and accessibility tooling. “That styling isn’t working because the slotted content is in the light DOM — your shadow-scoped stylesheet doesn’t reach it.”

Framework-agnostic component — a custom element built with Lit that can be dropped into any framework or no framework at all, since it compiles to a standard web component. “We built the date picker as a framework-agnostic component so both the React dashboard and the vanilla-JS marketing site can use the exact same implementation.”

Reactive update cycle — the batched, asynchronous process by which Lit schedules and applies DOM updates after one or more reactive properties change, similar in spirit to React’s render batching. “Multiple property changes in the same tick only trigger one pass through the reactive update cycle, so you won’t see partial re-renders.”

Common Phrases

• “Should this be a reactive property, or is a plain internal field enough since it doesn’t need to trigger a re-render?”
• “Is shadow DOM encapsulation actually necessary here, or would light DOM styling be simpler for this component?”
• “Will this component work as a framework-agnostic component inside our React app, or does it assume Lit’s own rendering context?”
• “Does this update happen in the same reactive update cycle, or could we see an intermediate render state?”
• “How do we style slotted light DOM content without breaking the shadow boundary?”

Example Sentences

Proposing a shared component library: “Building these as framework-agnostic components in Lit means design system updates ship once, instead of being reimplemented separately for React and Vue.”

Reviewing a component’s API: “This field should be a reactive property — right now updating it silently doesn’t re-render, which will confuse anyone using this component.”

Debugging a styling issue: “The slot content isn’t picking up our theme because it’s in the light DOM — shadow DOM encapsulation is doing exactly what it’s supposed to, we just need a different styling approach.”

Professional Tips

• Use reactive property precisely when reviewing Lit code — calling every class field “state” blurs an important distinction for anyone debugging a stale render.
• Explain shadow DOM encapsulation proactively when a design system team asks “why doesn’t our CSS reach into this component” — it’s usually working as intended, not a bug.
• Pitch Lit to cross-framework teams using framework-agnostic component — it’s the concrete adoption argument that resonates with platform and design-system stakeholders.
• Reference the reactive update cycle when explaining why several state changes only cause one visible re-render — it prevents unnecessary “why is this batching” questions.

Practice Exercise

1. Explain the difference between a reactive property and a plain class field in a Lit component.
2. Describe why shadow DOM encapsulation can make styling slotted content tricky, and how light DOM fits in.
3. Write a sentence pitching Lit to a team using three different frontend frameworks across their products.