You're viewing docs for an older version of Lit. Click here for the latest version.

Use a component

This page describes how to use a LitElement component in your application. It also describes how to make sure your deployed code is browser-ready by building it for production and loading the Web Components polyfills.

This is a general guide to using third-party LitElement components. Refer to a component's README or other documentation for specific details.

To use a LitElement component in your code:

  1. From your project folder, install the component from npm.

  2. Import the component.

    In a JavaScript module:

    In an HTML page:


  3. Add the component to your application or component:

Elements built with LitElement are published to npm as standard JavaScript modules, which all major browsers can now load.

However, LitElement and elements built with it import their dependencies using bare module specifiers (for example, import { ... } from 'module-name') instead of full paths (import {...} from '../path/to/module-name').

At the time of writing, browsers must still be provided with the full path to a standard JavaScript module in order to load it. To convert bare module specifiers to full paths, a light transform is required.

For a local server that does this automatically, try the Open Web Components ES dev server.

To build for production, you can use a bundler such as WebPack or Rollup.

The following example configuration for Rollup resolves dependencies, converts bare module specifers to paths, and bundles the output.


See a sample build configuration for LitElement with Babel and Rollup.

Elements built with LitElement use the Web Components set of standards, which are currently supported by all major browsers with the exception of Edge.

For compatibility with older browsers and Edge, load the Web Components polyfills.

To load the WebComponents polyfills:

  1. From your project folder, install the @webcomponents/webcomponentsjs package:

  2. Add the polyfills to your HTML entrypoint:

  3. Ensure that node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js and node_modules/@webcomponents/webcomponentsjs/bundles/**.* are included in your build.

Do not transpile the polyfills. Bundling them is okay.

See the Webcomponentsjs documentation for more information.