### Lit documentation on getting started

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

A guide for new users to begin with Lit, covering installation and basic concepts.

```html
https://lit.dev/docs/getting-started/
```

--------------------------------

### Set up Lit Development Environment

Source: https://github.com/lit/lit.dev/blob/main/CONTRIBUTING.md

Clone the Lit repository, install dependencies, and start the development server.

```bash
git clone https://github.com/lit/lit.dev.git
cd lit.dev
npm ci
npm run dev
```

--------------------------------

### Install @lit/localize

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/overview.md

Install the client library and the command-line interface tool.

```sh
npm i @lit/localize
npm i -D @lit/localize-tools
```

--------------------------------

### Build and Start Production Server

Source: https://github.com/lit/lit.dev/blob/main/README.md

Build the project and start the production server.

```sh
npm run build
npm start
```

--------------------------------

### Install and Initialize ESLint

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

Commands to install ESLint and generate a configuration file.

```bash
npm install eslint --save-dev
npx eslint --init
```

--------------------------------

### Install @lit-labs/signals

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/blog/2024-10-08-signals.md

Install the experimental signals package for Lit using npm. This is the first step to start using signals for reactive programming.

```sh
npm i @lit-labs/signals
```

--------------------------------

### Install Dependencies

Source: https://github.com/lit/lit.dev/blob/main/README.md

Install all required project dependencies using npm.

```sh
npm ci
```

--------------------------------

### Install @lit/context

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/context.md

Install the Lit context package using npm.

```bash
npm i @lit/context
```

--------------------------------

### Handle Mouse Events with MouseMoveController

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/composition/controllers.md

This example demonstrates a MouseMoveController that performs setup and cleanup when its host is connected and disconnected, and requests an update when the mouse input changes.

```ts
// This code is from a playground example and not fully shown here.
// It demonstrates a MouseMoveController for handling mouse events.
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/starter-kits.md

Installs project dependencies after downloading or cloning a starter project. Requires Node.js 10 or greater.

```bash
cd <project folder>
npm i
```

--------------------------------

### Configure npm Start Script

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

Add a start script to your package.json to easily run the Web Dev Server. This command initiates the development server.

```json
"scripts": {
  "start": "web-dev-server"
}
```

--------------------------------

### Install Lit Task

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/task.md

Install the package via npm.

```bash
npm install @lit/task
```

--------------------------------

### Install lit-html Next Major

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/blog/2020-09-22-lit-element-and-lit-html-next-preview.md

Use this command to install the next major version of lit-html.

```sh
npm i lit-html@next-major
```

--------------------------------

### Start Development Server

Source: https://github.com/lit/lit.dev/blob/main/README.md

Launch the development server to view the site with live reloading.

```sh
npm run dev
```

--------------------------------

### Install lit-html

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/libraries/standalone-templates.md

Use npm to install the standalone lit-html package.

```sh
npm install lit-html
```

--------------------------------

### Start Docker Environment

Source: https://github.com/lit/lit.dev/blob/main/README.md

Build and run the production Docker containers locally.

```sh
docker build -t litdev . --build-arg LITDEV_ENV=local
docker run --rm --name litdev -p 6415:6415 -e LITDEV_ENV=local -e MODE=main litdev
docker run --rm --name litdev-playground -p 6416:6416 -e LITDEV_ENV=local -e MODE=playground litdev
```

--------------------------------

### Install Legacy Support for Web Test Runner

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/testing.md

Install the `@web/dev-server-legacy` package as a development dependency to enable legacy browser support.

```bash
npm i @web/dev-server-legacy --save-dev
```

--------------------------------

### Initialize WebdriverIO Project

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/testing.md

Run this command in your terminal to start the WebdriverIO configuration wizard.

```bash
npm init wdio@latest ./
```

--------------------------------

### Full IDE playground example

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/internal/demos.md

Embeds a fully editable project environment with a side-by-side preview.

```html
{% raw %}{% playground-ide "v3-docs/templates/define" %}{% endraw %}
```

--------------------------------

### Lit Playground example

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

An interactive playground to experiment with Lit features and examples.

```html
https://lit.dev/playground/#sample=examples/motion-simple
```

--------------------------------

### Install LitElement Next Major

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/blog/2020-09-22-lit-element-and-lit-html-next-preview.md

Use this command to install the next major version of LitElement.

```sh
npm i lit-element@next-major
```

--------------------------------

### Install Web Dev Server

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

Install Web Dev Server as a development dependency. This server handles module specifiers for browser compatibility.

```bash
npm i @web/dev-server --save-dev
```

--------------------------------

### Install @lit-labs/signals

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/signals.md

Install the `@lit-labs/signals` package from npm to integrate with the TC39 Signals Proposal.

```sh
npm i @lit-labs/signals

```

--------------------------------

### Simple Lit Component Example

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/components/overview.md

A basic Lit component demonstrating a simple greeting. This example utilizes TypeScript decorators.

```typescript
import {LitElement, html, css} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
    h1 {
      color: var(--simple-greeting-text-color, blue);
    }
  `;

  @property({
    type: String,
    attribute: 'name',
    reflect: true,
  })
  name = 'World';

  render() {
    return html`<h1>Hello, ${this.name}!</h1>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'simple-greeting': SimpleGreeting;
  }
}

```

--------------------------------

### Verify signal-polyfill installation

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/signals.md

Check for duplicate installations of the signal-polyfill to prevent signal graph partitioning.

```sh
npm ls signal-polyfill
```

```sh
npm dedupe
```

--------------------------------

### Install TypeScript

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

Command to add the TypeScript compiler as a development dependency.

```bash
npm i -D typescript
```

--------------------------------

### Install Babel Dependencies

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/publishing.md

Install the necessary Babel packages as development dependencies. This includes the core compiler, CLI, preset-env, and the decorators plugin.

```sh
npm install --save-dev \
  @babel/core \
  @babel/cli \
  @babel/preset-env \
  @babel/plugin-proposal-decorators
```

--------------------------------

### Define a component with Polymer

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/articles/article/lit-for-polymer-users.md

Example of a basic component definition using the Polymer library.

```js
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class UserView extends PolymerElement {
  static get properties() {
    return {
      name: String
    };
  }

  static get template() {
    return html`
      <div>[[name]]</div>
    `;
  }
}
```

--------------------------------

### Single file playground example

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/internal/demos.md

Embeds a single editable file from a project with a preview pane below it.

```html
{% raw %}{% playground-example "v3-docs/templates/define" "my-element.ts" %}{% endraw %}
```

--------------------------------

### Run Web Dev Server

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

Command to start the development server using the configured npm script. This command should be run from your project's root directory.

```bash
npm run start
```

--------------------------------

### Install Build Dependencies

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/production.md

Install the necessary Node.js modules for the Rollup build process. These include Rollup itself and various plugins for HTML handling, module resolution, minification, and more.

```sh
npm i --save-dev rollup \
  @web/rollup-plugin-html \
  @web/rollup-plugin-copy \
  @rollup/plugin-node-resolve \
  @rollup/plugin-terser \
  rollup-plugin-minify-html-literals \
  rollup-plugin-summary
```

--------------------------------

### Install Lit via npm

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/getting-started.md

Use this command to add the Lit package to your project dependencies.

```sh
npm i lit
```

--------------------------------

### Configure ESLint NPM Script

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

Example configuration for adding a linting script to package.json.

```json
{
  "scripts": {
    "lint": "eslint \"**/*.{js,ts}\"",
  }
}
```

--------------------------------

### Syntax highlighting example

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/internal/demos.md

Displays a non-interactive code block using the standard documentation renderer.

```js
html`<h1>Hello ${name}</h1>`
```

--------------------------------

### Dynamically load locale bundle

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/transform-mode.md

Example of loading the appropriate locale-specific script based on URL parameters.

```js
import {allLocales} from './generated/locales.js';

const url = new URL(window.location.href);
const unsafeLocale = url.searchParams.get('locale');
const locale = allLocales.includes(unsafeLocale) ? unsafeLocale : 'en';

const script = document.createElement('script');
script.type = 'module';
script.src = `/${locale}.js`;
document.head.appendChild(script);
```

--------------------------------

### Define messages in source

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/overview.md

Example of using the msg function with strings and templates.

```js
msg('Hello World');
msg(str`Hello ${name}`);
msg(html`Hello <b>World</b>`);
```

--------------------------------

### Run Development Server

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/starter-kits.md

Starts the local development server for a Lit component project. The server typically runs on http://localhost:8000/dev/, but check the terminal output for the exact port.

```bash
npm run serve
```

--------------------------------

### Define HTML-based plugin structure

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/context.md

Example of using context to allow parent elements to communicate with light DOM children.

```html
<code-editor>
  <code-editor-javascript-mode></code-editor-javascript-mode>
  <code-editor-python-mode></code-editor-python-mode>
</code-editor>
```

--------------------------------

### Provide Context via HTML

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/context.md

Example of passing a value to a provider element via a public property.

```html
html`<my-provider-element .myData=${someData}>`
```

--------------------------------

### Define a Lit component with a countdown timer

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/index.md

A non-trivial example demonstrating the LitElement base class, reactive properties, and declarative templates.

```javascript
{% playground-ide "v3-docs/what-is-lit/" %}
```

--------------------------------

### Lit Element try page

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

A page to try out Lit Element, likely providing an interactive environment or examples.

```html
https://lit-element.polymer-project.org/try
```

--------------------------------

### Declare Properties with Static Getter in Polymer

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/articles/article/lit-for-polymer-users.md

Polymer uses a static get properties() getter to declare properties. This example shows the syntax for comparison.

```js
static get properties() {
   return {
     user: String,
     count: {
       type: Number,
       notify: true
     }
   }
 }

```

--------------------------------

### Create a simple greeting component

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/home/3-tour.html

Defines a basic Lit component that renders a greeting. Use this as a starting point for building custom elements.

```ts
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
```

```js
import {LitElement, html} from 'lit';

export class SimpleGreeting extends LitElement {
  static properties = {
    name: {},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);
```

--------------------------------

### Import Lit Components

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

Import LitElement, html, and css for creating web components. This is a common starting point for Lit projects.

```javascript
import {LitElement, html, css} from 'lit';
```

--------------------------------

### Lit SSR Testing Setup

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/ssr/authoring.md

Utilize the `@lit-labs/testing` package with Web Test Runner and `@lit-labs/ssr` to create server-side rendered test fixtures for your Lit components.

```javascript
import { fixture, assert } from '@lit-labs/testing';
import '../my-component.js';

describe('my-component', () => {
  it('is server-side renderable', async () => {
    const el = await fixture('<my-component></my-component>');
    // Add assertions here
    assert.shadowDom.equal(el, `
      <style>
        /* component styles */
      </style>
      <!-- component content -->
    `);
  });
});
```

--------------------------------

### Declare and Set a Reactive Property (JavaScript)

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/components/properties.md

This JavaScript example demonstrates declaring a reactive property `greeting` and setting its value, triggering the generated property accessor.

```js
// Declare a property
static properties = {
  greeting: {},
}
constructor() {
  this.super();
  this.greeting = 'Hello';
}
...
// Later, set the property
this.greeting = 'Hola'; // invokes greeting's generated property accessor
```

--------------------------------

### Implement setupLazy method

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/tutorials/content/tooltip/08.md

Initializes the tooltip lazily and stores the reference for future updates.

```ts
setupLazy() {
  this.didSetupLazy = true;
  SimpleTooltip.lazy(this.part!.element, (tooltip: SimpleTooltip) => {
    this.tooltip = tooltip;
    this.renderTooltipContent();
  });
}
```

```js
setupLazy() {
  this.didSetupLazy = true;
  SimpleTooltip.lazy(this.part.element, (tooltip) => {
    this.tooltip = tooltip;
    this.renderTooltipContent();
  });
}
```

--------------------------------

### Lit tutorials

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

A collection of tutorials to help users learn and master Lit features.

```html
https://lit.dev/tutorials/
```

--------------------------------

### Controller Initialization with Configuration Parameter (JavaScript)

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/composition/controllers.md

Add constructor parameters to controllers for one-time configuration values, such as timing intervals, in addition to storing the host reference and registering the controller.

```js
class ClockController {
  constructor(host, timeout) {
    this.host = host;
    this.timeout = timeout;
    host.addController(this);
  }
}
```

--------------------------------

### Example Localized Template Module

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/runtime-mode.md

This is an example of a generated JavaScript module for a specific locale (es-419) containing localized templates.

```js
// locales/es-419.ts
export const templates = {
  h3c44aff2d5f5ef6b: html`Hola <b>Mundo!</b>`,
};

```

--------------------------------

### Register Tutorial in Catalog

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md

Add a new tutorial to the catalog by invoking the loadTutorialData function within the tutorials.11tydata.js file.

```javascript
const tutorials = await Promise.all([
  ...
  loadTutorialData('tutorial-name'),
  ...
]);
```

--------------------------------

### Controller Initialization with Host Reference (JavaScript)

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/composition/controllers.md

Implement the controller's constructor to store a reference to the host component and register the controller for lifecycle updates using `host.addController(this)`.

```js
class ClockController {
  constructor(host) {
    // Store a reference to the host
    this.host = host;
    // Register for lifecycle updates
    host.addController(this);
  }
}
```

--------------------------------

### Install Babel dependencies for Webpack 4

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/releases/upgrade.md

Install the necessary Babel plugins to transpile ES2021 syntax for compatibility with Webpack 4.

```sh
> npm i -D babel-loader@8 \
    @babel/plugin-transform-optional-chaining \
    @babel/plugin-transform-nullish-coalescing-operator \
    @babel/plugin-transform-logical-assignment-operators
```

--------------------------------

### Manage project build lifecycle

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/starter-kits.md

Commands for cleaning, building, and serving the project during development.

```bash
npm run clean
```

```bash
npm run build
```

```bash
npm run serve
```

--------------------------------

### Implement Code Checking Logic

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md

Use `installCodeChecker` to set up communication and define the checking logic. The callback should return an object with `passed` (boolean) and an optional `message` (string).

```javascript
import {installCodeChecker} from './_check-code-helpers.js';

installCodeChecker(async () => {
  let passed = true;
  let message = '';

  const element = document.body.querySelector('my-element');
  const nameAttribute = element.getAttribute('name');

  if (element.name === undefined) {
    passed = false;
    message = `Define the 'name' property on the element.`;
  } else if (element.name !== nameAttribute) {
    passed = false;
    message = `The element's name property is not a reactive property.`;
  }

  return {passed, message};
});
```

--------------------------------

### Salesforce Developers blog post on LWC

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

An introduction to Lightning Web Components (LWC) from Salesforce Developers.

```html
https://developer.salesforce.com/blogs/2018/12/introducing-lightning-web-components.html
```

--------------------------------

### Lit Template Compilation Transform Example

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/blog/2023-10-10-lit-3.0.md

This example illustrates the transformation applied by the Lit template compiler. It shows how an `html` tag function declaration is converted into a pre-compiled template object, optimizing runtime performance by skipping the template preparation phase.

```typescript
const hi = (name) => html`<h1>Hello ${name}!</h1>`;
```

```typescript
const b = (s) => s;
const lit_template_1 = {h: b`<h1>Hello <?></h1>`, parts: [{type: 2, index: 1}]};
const hi = (name) => ({_$litType$: lit_template_1, values: [name]});
```

--------------------------------

### Render a template result

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/ssr/server-usage.md

Example of producing a TemplateResult using the html tag.

```ts
html`<h1>Hello</h1>`
```

--------------------------------

### Lit documentation on development and production builds

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

Information on configuring Lit builds for development (with debugging) and production (optimized for performance).

```html
https://lit.dev/docs/tools/development/#development-and-production-builds
```

--------------------------------

### Generated localized output

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/transform-mode.md

Example of the output generated for different locales after transformation.

```js
// locales/en/launch-button.js
render() {
  return html`<button>Launch rocket</button>`
}

// locales/es-419/launch-button.js
render() {
  return html`<button>Lanza cohete</button>`
}
```

--------------------------------

### Localize Message Types

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/overview.md

Examples of localizing plain strings, templates, and nested messages.

```js
msg('Hello World');
```

```js
msg(str`Hello ${name}`);
```

```js
msg(html`Hello <b>World</b>`);
```

```js
msg(html`Hello <b>${name}</b>`);
```

```js
html`<button>${msg('Hello World')}</button>`;
```

--------------------------------

### Source code for localization

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/transform-mode.md

Example of source code using the msg function before transformation.

```js
// src/launch-button.js
import {msg} from '@lit/localize';

render() {
  return html`<button>${msg('Launch rocket')}</button>`
}
```

--------------------------------

### Define Tutorial Manifest Interface

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md

The TutorialManifest interface defines the metadata and step structure for a tutorial. It is used to configure catalog display and step navigation.

```ts
interface TutorialManifest {
  // The title of the tutorial. This shows up as the title in
  // the catalog card and in the tutorial itself
  header: string;
  // The difficulty of the tutorial
  difficulty: '' | 'Beginner' | 'Intermediate' | 'Advanced';
  // The size of the card in the catalog NOTE: you may have to
  // trigger `npm run dev` to make this change reflect
  size: 'tiny'|'small'|'medium'|'large';
  // Approximate duration in minutes of the tutorial to be
  // displayed on the catalog card. Set to 0 if you don't
  // want to display a duration
  duration: number;
  // Category to display it in the catalog. Can be any string
  // actually, but 'Learn' and 'Build' will actually make it
  // display in the appropriate sections in the catalog
  category: 'Learn' | 'Build' | 'Draft';
  // Location of the image to display relative to site root.
  // e.g. "images/animations.gif"
  imgSrc?: string;
  // Alt text for the image
  imgAlt?: string;
  // Array of tutorial step titles to display in the tutorial
  // itself. Also used to calculate number of steps in tutorial
  steps: {
    // Title of the current step
    title: string;
    // If false or omitted, the "after" code will be set to the "before" code of
    // the next step. This is useful for reducing code duplication when the
    // next step is the "solved" code for the previous step.
    //
    // Set to true if there is an "after" directory for this step or if it is
    // the last step in the tutorial.
    hasAfter?: boolean;
    // Set to true if there should be no "solve" button for this step; in this
    // case no "after" folder is required.
    noSolve?: boolean;
    // Whether or not the step is code checkable. see the `Code Checking`
    // section below for more details.
    checkable?: boolean;
  }[]
}
```

--------------------------------

### Configure project.json for Code Checking

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md

Add `_check-code.js` as a hidden file and extend from `checkable-tutorial-base.json` to enable code checking.

```json
{
  "extends": "/samples/checkable-tutorial-base.json",
  "files": {
    "index.html": {},
    "my-element.ts": {},
    "_check-code.js": {"hidden": true}
  }
}
```

--------------------------------

### range Directive

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/templates/directives.md

Returns an iterable of integers from start to end (exclusive) incrementing by step.

```APIDOC
## range

### Description
Returns an iterable of integers from start to end (exclusive) incrementing by step.

### Signature
- range(end: number): Iterable<number>
- range(start: number, end: number, step?: number): Iterable<number>

### Parameters
- **start** (number) - Optional - The starting integer.
- **end** (number) - Required - The exclusive end integer.
- **step** (number) - Optional - The increment step.
```

--------------------------------

### Compare context equality

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/context.md

Demonstrates how context keys are compared using strict equality.

```ts
// true
createContext('my-context') === createContext('my-context')
// true
createContext(Symbol.for('my-context')) === createContext(Symbol.for('my-context'))
```

--------------------------------

### Render child expressions

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/templates/expressions.md

Examples of rendering dynamic content within paragraph or main tags.

```js
html`<p>Hello, ${name}</p>`
```

```js
html`<main>${bodyText}</main>`
```

--------------------------------

### Import ContextProvider

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/context.md

Import the ContextProvider controller from the @lit/context package.

```ts
import {ContextProvider} from '@lit/context';
```

--------------------------------

### Configure Web Test Runner for Legacy Browsers

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/testing.md

Set up your `web-test-runner.config.js` to include the `legacyPlugin`. Ensure the plugin is last and configure polyfills, including Lit's `polyfill-support` module for compatibility.

```javascript
import { legacyPlugin } from '@web/dev-server-legacy';

export default {
  /* ... */
  plugins: [
    // make sure this plugin is always last
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // Inject lit's polyfill-support module into test files, which is required
        // for interfacing with the webcomponents polyfills
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};
```

--------------------------------

### GET /lit/dist@3/all/lit-all.min.js

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

Retrieves the minified all-inclusive bundle of the Lit library version 3.

```APIDOC
## GET /lit/dist@3/all/lit-all.min.js

### Description
Fetches the minified full library bundle for Lit version 3, containing all features and utilities provided by the Lit ecosystem.

### Method
GET

### Endpoint
https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js

### Response
#### Success Response (200)
- **Content-Type** (string) - application/javascript
```

--------------------------------

### Configure multiple component instances

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/components/styles.md

Demonstrates applying different custom property values to distinct instances of the same component.

```html
<style>
  my-element {
    --my-background: rgb(67, 156, 144);
  }
  my-element.stuff {
    --my-background: #111111;
  }
</style>
<my-element></my-element>
<my-element class="stuff"></my-element>
```

--------------------------------

### GET /lit/dist@3/core/lit-core.min.js

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

Retrieves the minified core bundle of the Lit library version 3.

```APIDOC
## GET /lit/dist@3/core/lit-core.min.js

### Description
Fetches the minified core library file for Lit version 3, which includes essential functionality for building web components.

### Method
GET

### Endpoint
https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js

### Response
#### Success Response (200)
- **Content-Type** (string) - application/javascript
```

--------------------------------

### Lit development and production builds

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

Lit provides tools for optimizing builds for development and production. Development builds offer more debugging information, while production builds are smaller and faster.

```bash
npm run build:dev
npm run build:prod
```

--------------------------------

### Test Lit Component with WebdriverIO

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/testing.md

Example of rendering a Lit component into the DOM before a test and cleaning it up afterward.

```ts
import { expect, $ } from '@wdio/globals'

// Component.ts contains the <simple-greeting> component implemented the same as:
// https://lit.dev/docs/components/overview/
import './components/Component.ts'

describe('Lit Component testing', () => {
    let elem: HTMLElement

    beforeEach(() => {
        elem = document.createElement('simple-greeting')
    })

    it('should render component', async () => {
        elem.setAttribute('name', 'WebdriverIO')
        document.body.appendChild(elem)
        await expect($(elem)).toHaveText('Hello, WebdriverIO!')
    })

    afterEach(() => {
        elem.remove()
    })
})
```

--------------------------------

### Handle events with arrow functions

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/articles/article/lit-for-polymer-users.md

Example of using an arrow function as an event handler in a Lit template.

```html
<input @change=${(e) => this.setValue(e.target.value)}>
```

--------------------------------

### Lit learn section

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

Resources for learning Lit, including guides, best practices, and advanced topics.

```html
https://lit.dev/learn/
```

--------------------------------

### Controller Initialization with Configuration Parameter (TypeScript)

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/composition/controllers.md

Add constructor parameters to controllers for one-time configuration values, such as timing intervals, in addition to storing the host reference and registering the controller.

```ts
class ClockController implements ReactiveController {
  private host: ReactiveControllerHost;
  timeout: number

  constructor(host: ReactiveControllerHost, timeout: number) {
    this.host = host;
    this.timeout = timeout;
    host.addController(this);
  }
}
```

--------------------------------

### Importing Lit modules

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/requirements.md

Example of a bare module specifier used to import the html function from the lit-html package.

```js
import {html} from 'lit-html';
```

--------------------------------

### Import live directive

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/templates/directives.md

Import the live directive from Lit.

```js
import {live} from 'lit/directives/live.js';
```

--------------------------------

### Build localized application

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/overview.md

Command to incorporate translations into the application.

```sh
lit-localize build
```

--------------------------------

### Generate runtime locale template

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/localization/overview.md

Example of a generated TypeScript module containing localized templates for runtime mode.

```js
// locales/es-419.ts
export const templates = {
  hf71d669027554f48: html`Hola <b>Mundo</b>`,
};
```

--------------------------------

### Get Directive Options in Lit

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

Retrieves the options associated with a directive part. These options include the directive constructor.

```typescript
const getDirectiveOptions = (part: Part) => part.options;
```

--------------------------------

### Display Switchable Code Samples

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/samples/tutorials/CONTRIBUTING.md

Use the switchable-sample macro to provide multiple language versions of a code snippet in tutorial instructions.

```html
{% switchable-sample %}

```ts
@customElement('my-element')
class MyElement extends LitElement {
  @property({attribute: false}) items = [1,2,3];
  render() {
    html`
      &lt;ul>
        ${this.items.map(item => html`&lt;li>${item}&lt;/li>`)}
      &lt;/ul>`;
  }
}
```

```js
class MyElement extends LitElement {
  render() {
    static properties = {items: {attribute: false}};
    constructor() {
      super();
      this.items = [1,2,3];
    }

    html`
      &lt;ul>
        ${this.items.map(item => html`&lt;li>${item}&lt;/li>`)}
      &lt;/ul>`;
  }
}
customElements.define('my-element', MyElement);
```

{% endswitchable-sample %}
```

--------------------------------

### Define task arguments with loose inference

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/task.md

Example of a task where argument types are inferred as a union array rather than a tuple.

```ts
class MyElement extends LitElement {
  @property() myNumber = 10;
  @property() myText = "Hello world";

  _myTask = new Task(this, {
    args: () => [this.myNumber, this.myText],
    task: ([number, text]) => {
      // implementation omitted
    }
  });
}
```

--------------------------------

### Lit Labs Eleventy Plugin Lit roadmap section

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

The roadmap for the Lit Labs Eleventy Plugin.

```git
https://github.com/lit/lit/tree/main/packages/labs/eleventy-plugin-lit#roadmap
```

--------------------------------

### Run ESLint

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

Command to execute linting on a specific file.

```bash
npx eslint yourfile.js
```

--------------------------------

### Basic Web Dev Server Configuration

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/tools/development.md

A minimal configuration file for Web Dev Server. It enables auto-opening, watch mode, and development-specific module resolution.

```javascript
export default {
  open: true,
  watch: true,
  appIndex: 'index.html',
  nodeResolve: {
    exportConditions: ['development'],
  },
};
```

--------------------------------

### Define Light DOM children in HTML

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/composition/component-composition.md

Example of providing light DOM children to a custom element using slots.

```html
<top-bar>
  <icon-button icon="menu" slot="nav-button"></icon-button>
  <span slot="title">Fuzzy</span>
</top-bar>
```

--------------------------------

### Get Directive Value in Lit

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

Retrieves the current value of a directive part. This is used to check if the directive needs to be updated.

```typescript
const getDirectiveValue = (part: Part) => part.value;
```

--------------------------------

### Import Lit from CDN bundle

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/getting-started.md

Use this approach for projects without a build tool. Ensure the script tag uses type="module".

```js
import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
```

--------------------------------

### Get Directive Instance in Lit

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-tests/known-good-urls.txt

Retrieves the directive instance associated with a part. If no instance exists, it creates a new one.

```typescript
const getDirectiveInstance = (part: Part) => {
  let instance = part.value as Directive;
  if (instance === undefined || instance === null) {
    // TODO: https://github.com/lit/lit/issues/1777
    // The directive needs to be able to update the SVG element.
    // For now, we just render it.
    instance = createDirectiveInstance(part.options.provider as DirectiveConstructor);
    part.value = instance;
  }
  return instance;
};
```

--------------------------------

### Import createContext

Source: https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/docs/v3/data/context.md

Import the createContext function from the @lit/context package.

```ts
import {createContext} from '@lit/context';
```