What is Lit component

Each LIT component is a standard web components.

Web components have been introduced from the World Wide Web Consortium (W3C) to have interoperable components:

In fact, they are natively supported by browsers
and used in any HTML environment, with any framework or without any framework.

The W3C Web Component model is based on the following specifications:

• Custom Elements: HTML tags that encapsulate HTML content, including CSS instructions and javascript scripts;
• Shadow DOM: JavaScript API to insert hidden DOM elements into a document tree;
• ES Modules: to insert and reuse JavaScript documents, exporting objects, functions or variables from a JavaScript file;
• HTML Templates: markup templates not mapped on the displayed page that can be used as templates for custom elements.

The Web Component standard is supported by the most common browsers.

To use a Web component you need:

1. create a JavaScript class, or function, and export it from an existing JavaScript file, using ES Modules;
2. declare the new Custom Element, using the CustomElementRegistry.define() method;
3. add a hidden Shadow DOM to insert child elements to the Custom Element (optional);
4. define an HTML template with tags;
5. use the Custom Element thus generated within the Web page like any standard HTML element.

A Lit component is a self-contained unit of the user interface, assembled from smaller building blocks such as:

• standard HTML elements
• other Web components

A Lit component can be a building block used to create larger and more complex interfaces:

• within an HTML document;
• another web component;
• a component of the framework.

See LIT_0 slide