Components overview
A Lit component is a reusable piece of UI. You can think of a Lit component as a container that has some state and that displays a UI based on its state. It can also react to user input, fire events—anything you'd expect a UI component to do. And a Lit component is an HTML element, so it has all of the standard element APIs.
Creating a Lit component involves a number of concepts:
Defining a component. A Lit component is implemented as a custom element, registered with the browser.
Rendering. A component has render method that's called to render the component's contents. In the render method, you define a template for the component.
Reactive properties. Properties hold the state of the component. Changing one or more of the components' reactive properties triggers an update cycle, re-rendering the component.
Styles. A component can define encapsulated styles to control its own appearance.
Lifecycle. Lit defines a set of callbacks that you can override to hook into the component's lifecycle—for example, to run code when the element's added to a page, or whenever the component updates.
Here's a sample component: