liveBook · Manning

LitElement

As explained in Web Components in Action

LitElement is a base class from the Lit project for creating Web Components with reactive properties and lit-html rendering.

LitElement is a Lit project base class for building Web Components with template literals, lit-html rendering, and the standard Web Components lifecycle. section 10.3

A LitElement-based component connects familiar browser pieces in a compact workflow:

  • Define HTML and CSS through a template managed automatically by lit-html. section 10.3
  • Use the Web Components lifecycle while ShadyDOM and ShadyCSS provide compatibility-oriented behavior where needed. section 10.3
  • Treat the approach as a smaller alternative to the discontinued feature development of the Polymer Library, rather than as an HTML Import workflow. section 10.3

How Web Components in Action covers it

How deep it goes
Explains the rendering and compatibility workflow, but stops short of API details or a complete component implementation.
Examples
Uses template literals, automatically managed templates, shadow-root content, and CSS rewritten by ShadyCSS as its concrete artifacts.
What it assumes
Assumes familiarity with Web Components, Shadow DOM, template literals, and the standard component lifecycle.
What you can do after
Apply it via LitElement to structure Web Components with lit-html templates and compatibility polyfills.
How it connects
Connects Web Components, lit-html, Shadow DOM, ShadyDOM, ShadyCSS, and the Polymer Project.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.