L'API servant à interagir avec un composant de Svelte 3 et 4 est différente de celle de Svelte 5. Notez que cette page ne s'applique _pas_ aux composants en mode legacy d'une application Svelte 5. ## Créer un composant [!VO]Creating a component ```ts // @noErrors const component = new Component(options); ``` Un composant prévu pour le client — c'est-à-dire un composant compilé avec `generate: 'dom'` (ou l'option `generate` non définie) est une classe JavaScript. ```ts // @noErrors import App from './App.svelte'; const app = new App({ target: document.body, props: { // en supposant que App.svelte contient quelque chose // comme `export let answer` answer: 42 } }); ``` Les options d'initialisation suivantes peuvent être fournies : | option | par défaut | description | | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | | `target` | **aucun** | Un `HTMLElement` ou `ShadowRoot` cible dans lequel rendre le composant. Cette option est obligatoire | | `anchor` | `null` | Un enfant de `target` qui doit être immédiatement après le composant à rendre | | `props` | `{}` | Un objet de propriétés à fournir au composant | | `context` | `new Map()` | Une `Map` de contexte racine contenant des paires clé-valeur à fournir au composant | | `hydrate` | `false` | Voir ci-dessous | | `intro` | `false` | Si `true`, les transitions seront jouées lors du rendu initial, sans attendre un changement d'état | Les enfants existante de `target` sont laissés à leur place. L'option `hydrate` dit à Svelte d'améliorer le DOM existant (en général venant du rendu côté serveur) plutôt que de créer de nouveaux éléments. Ceci ne fonctionne que si le composant a été compilé avec l'[option `hydratable: true`](/docs/svelte-compiler#compile). L'hydratation des éléments `` ne fonctionne correctement que si leur rendu côté serveur a également été compilé avec `hydratable: true`, ce qui ajoute un marqueur à chaque élément de `` afin que le composant sache quels élément du `` il est responsable d'enlever lors de l'hydratation. Bien que les enfants de `target` sont normalement laissés intacts, `hydrate: true` va supprimer tous les enfants de la cible. Pour cette raison, l'option `anchor` ne peut pas être utilisée avec `hydrate: true`. Le DOM existant n'a pas besoin de correspondre au composant — Svelte va "réparer" le DOM au fur et à mesure. ```ts /// file: index.js // @noErrors import App from './App.svelte'; const app = new App({ target: document.querySelector('#server-rendered-html'), hydrate: true }); ``` > [!NOTE] > Avec Svelte 5+, utilisez plutôt [`mount`](svelte#mount) ## `$set` ```ts // @noErrors component.$set(props); ``` Définit programmatiquement des props sur une instance. `component.$set({ x: 1 })` est équivalent à `x = 1` dans le bloc `