i18n(fr): Update guides/integrations-guide/lit from #8270

thomasbnt · thomasbnt · commit ea076957963b · 2024-06-25T16:42:25.000+02:00
Signed-off-by: Thomas Bonnet &lt;thomasbnt@protonmail.com&gt;
diff --git a/src/content/docs/fr/guides/integrations-guide/lit.mdx b/src/content/docs/fr/guides/integrations-guide/lit.mdx
@@ -126,6 +126,34 @@ import { MyElement } from '../components/my-element.js';
 Lit nécessite la présence de variables globales du navigateur tel que `HTMLElement` et `customElements`. Pour cette raison, le moteur de rendu Lit adapte le serveur avec ces éléments globaux pour que Lit puisse fonctionner. Il se peut que vous rencontriez des bibliothèques qui fonctionnent mal à cause de cela.
 :::
 
+### Décorateurs expérimentaux
+
+Pour utiliser [décorateurs expérimentaux dans Lit](https://lit.dev/docs/components/decorators/), ajoutez ce qui suit à votre fichier `tsconfig.json` :
+
+```json title="tsconfig.json" add={3}
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+  }
+}
+```
+
+Cela vous permet d'utiliser des décorateurs expérimentaux tels que `@customElement` et `@state` pour enregistrer un élément personnalisé et définir une propriété d'état dans votre composant Lit :
+
+```ts title="src/components/my-element.ts"
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("my-element")
+export class MyElement extends LitElement {
+    @state() name = "my-element";
+
+    override render() {
+        return html`<p>Bonjour à tous ! De ${this.name}</p>`;
+    }
+}
+```
+
 ### Polyfills et hydratation
 
 Le moteur de rendu gère automatiquement l'ajout des polyfills appropriés pour le support des navigateurs qui n'ont pas Declarative Shadow DOM. Le polyfill fait environ *1.5kB*. Si le navigateur supporte Declarative Shadow DOM, moins de 250 octets sont chargés (pour détecter le support).
