Concorde concept — lit + tailwind + vite. Some notes for an overview of Concorde's functioning Doc ID: docs/_core-concept/overview. Keywords: Concorde, supersoniks, docs/_core-concept/overview, overview, lit + tailwind + vite, concept, DataProvider, custom elements, reactive properties. URL: https://concorde.supersoniks.org/crawl/docs/_core-concept/overview.html.
lit + tailwind + vite
Some notes for an overview of Concorde's functioning
Standard Web components
A web component is simply a custom HTML element created using web standards:
web component = Custom Elements + shadowDom + HTML templates
Lit Library
Concorde components are written using the lightweight Lit library: https://lit.dev/.
A good portion of the elements documented on the Lit website are standard JavaScript concepts (e.g., mixins, tagged template literals).
The library simplifies the writing of web components by automating certain tasks:
- Creation of an open mode shadow DOM (the component is accessible from the outside via its shadow root property).
- Rendering function based on tagged template literals
- Reactive properties that trigger rendering when modified.
Our use of Lit rarely goes beyond this hello world
Typescript Language
We write the components in TypeScript, which is then compiled into JS.
Static and inferred typing provides stronger validation of the program's functioning during compilation. However, we often use the "any" type due to time constraints.
Lit uses TypeScript to simplify development through metadata:
- Simplified declaration of
custom elementsvia @customElement - Generation of
reactive propertiesvia @property.
☢️Warning:
- During development, we operate in interpreted mode, which is faster but allows errors that won't pass during the build.
- It is important to build a distribution before pushing the code to ensure everything is fine.
Compatibility with Classic JS Libraries
Compatibility issues may arise when using JS libraries, particularly regarding DOM traversal. This is because these libraries are blocked from traversing the DOM due to the presence of the shadow DOM. Here are some examples of things that may cause problems:
- Latest FontAwesome in SVG mode, icons are not replaced
- Libraries associated with jQuery
- document.getElementById
- ...