# 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) + [shadowDom](https://developer.mozilla.org/fr/docs/Web/Web_Components/Using_shadow_DOM) + [HTML templates](https://developer.mozilla.org/fr/docs/Web/HTML/Element/template)

## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#mix-ins), [tagged template literals](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals#gabarits_%C3%A9tiquet%C3%A9s)).

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](https://lit.dev/docs/components/rendering/) based on [tagged template literals](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals#gabarits_%C3%A9tiquet%C3%A9s)
- [Reactive properties](https://lit.dev/docs/components/properties/) that trigger rendering when modified.

Our use of Lit rarely goes beyond this [hello world](https://lit.dev/playground/#sample=examples/hello-world)

## Typescript Language

We write the components in [TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html), 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 elements` via @customElement
- Generation of `reactive properties` via @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
- ...

## Topics to Explore for Further Learning


[🧱 Creating components](#docs/_getting-started/create-a-component.md/create-a-component)

[🎨 Adding styles](#docs/_getting-started/theming.md/theming)

[🥨 Sharing data](#docs/_getting-started/pubsub.md/pubsub)