Question 1

How do I test LitElement components in production mode?

Accepted Answer

Use the npm scripts provided: run 'npm test:prod' for one-time testing or 'npm test:prod:watch' for continuous testing in production mode. This ensures your components work correctly with optimized Lit builds.

Question 2

LitElement or Stencil for building web components?

Accepted Answer

LitElement is lighter and more flexible, using standard web components with Lit's templating, while Stencil offers a more framework-like experience with JSX and built-in tooling. Choose LitElement for minimal overhead or Stencil for a batteries-included approach.

Question 3

How can I generate documentation for my LitElement project?

Accepted Answer

Run 'npm run docs' to build the site with eleventy, or 'npm run docs:serve' to preview locally. The template includes docs-src folder for content, and you can deploy to GitHub Pages by setting the source to the docs folder.

Question 4

Can LitElement be used with server-side rendering?

Accepted Answer

LitElement components are primarily client-side, but SSR is possible with tools like @lit-labs/ssr. However, this starter template doesn't include SSR setup, so additional configuration is needed for server-side rendering.

Question 5

What VS Code extensions are recommended for LitElement development?

Accepted Answer

The lit-plugin extension is highly recommended, as it provides syntax highlighting, type-checking, code completion, and linting for lit-html templates. The project is setup to suggest this extension to VS Code users.

Question 6

How do I handle bundling and minification in a LitElement project?

Accepted Answer

The template recommends publishing unoptimized modules and performing optimizations at the application level. For bundling, you can use tools like Rollup or Webpack separately, as the included Rollup config is only for docs generation.

Question 7

Is Lit 3.0 backward compatible with Lit 2.0?

Accepted Answer

Yes, Lit 3.0 has very few breaking changes and is interoperable with Lit 2.x. Most apps can extend version ranges to include both, and templates, base classes, etc., work across versions.

LitElement TypeScript starter

What is LitElement TypeScript starter?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions