{% highlight 'ts', true %}{% include '../../samples/examples/hello-world/simple-greeting.ts' %}{% endhighlight %}

{% highlight 'js', true %}{% include '../../samples/js/examples/hello-world/simple-greeting.js' %}{% endhighlight %}

{% highlight 'html', true %}{% endhighlight %} Edit this example in the Lit Playground

Custom Elements

Lit components are standard custom elements, so the browser treats them exactly like built-in elements. Use them in hand-written HTML or framework code, output them from your CMS or static site builder, even create instances in JavaScript — they just work!

Scoped styles

Lit scopes your styles by default, using Shadow DOM. This keeps your CSS selectors simple and ensures that your component’s styles don't affect — and aren't affected by — any other styles on the page.

Reactive properties

Declare reactive properties to model your component’s API and internal state. A Lit component efficiently re-renders whenever a reactive property (or corresponding HTML attribute) changes.

Declarative templates

Lit templates, based on tagged template literals, are simple, expressive and fast, featuring HTML markup with native JavaScript expressions inline. No custom syntax to learn, no compilation required.