Syntaxe

Éléments spéciaux

<slot>permalink

<slot><!-- contenu par défaut optionnel --></slot>

<slot name="x"><!-- contenu par défaut optionnel --></slot>

<slot prop={value}></slot>

Les composants peuvent avoir du contenu enfant, de la même façon que les éléments.

Le contenu est exposé dans le composant enfant avec l'élément <slot>, qui peut avoir un contenu par défaut qui sera utilisé si aucun enfant n'est fourni.

<!-- Widget.svelte -->
<div>
	<slot>
	ce contenu slot par défaut sera rendu si aucun contenu n'est fourni, comme dans le premier exemple
	</slot>
</div>

<!-- App.svelte -->
<Widget />
<!-- ce composant va rendre le contenu par défaut -->

<Widget>
	<p>ceci est du contenu qui remplacera le contenu slot par défaut</p>
</Widget>

Note: Si vous souhaitez afficher un élément HTML de type <slot>, vous pouvez utiliser <svelte:element this="slot" />.

<slot name="name">permalink

Les slots nommés permettent aux parents de cibler des zones spécifiques. Ils peuvent aussi avoir du contenu par défaut.

<!-- Widget.svelte -->
<div>
	<slot name="header">Aucun en-tête fourni</slot>
	<p>Du contenu entre l'en-tête et le bas de page</p>
	<slot name="footer"></slot>
</div>

<!-- App.svelte -->
<Widget>
	<h1 slot="header">Bonjour</h1>
	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</Widget>

Les composants peuvent être placés dans un slot nommé en utilisant le syntaxe <Component slot="name />. Pour positionner du contenu dans un slot sans l'entourer d'un élément, vous pouvez utiliser l'élément spécial <svelte:fragment>.

<!-- Widget.svelte -->
<div>
	<slot name="header">Aucun en-tête fourni</slot>
	<p>Du contenu entre l'en-tête et le bas de page</p>
	<slot name="footer"></slot>
</div>

<!-- App.svelte -->
<Widget>
	<HeaderComponent slot="header" />
	<svelte:fragment slot="footer">
		<p>Tous droits réservés.</p>
		<p>Copyright (c) 2019 Svelte Industries</p>
	</svelte:fragment>
</Widget>

$$slotspermalink

L'objet $$slots a comme clés les noms des slots passés au composant par le parent. Si le parent ne fournit pas un slot avec un nom particulier, ce nom ne sera pas présent dans $$slots. Cela permet aux composants d'afficher un slot (et d'autres éléments, comment des wrappers de style) uniquement si le parent le fournit.

Notez que passer explicitement un slot nommé vide ajoutera le nom de ce slot à $$slots. Par exemple, si un parent fournit <div slot="title" /> à un composant enfant, $$slots.title sera truthy dans l'enfant.

<!-- Card.svelte -->
<div>
	<slot name="title"></slot>
	{#if $$slots.description}
		<!-- Ce <hr> et ce <slot> seront rendus uniquement si un slot nommé "description" est fourni -->
		<hr>
		<slot name="description"></slot>
	{/if}
</div>

<!-- App.svelte -->
<Card>
	<h1 slot="title">Titre d'article de blog</h1>
	<!-- Aucun slot "description" n'est fourni, donc aucun des éléments dépendants de $$slots.description ne sera rendu -->
</Card>

<slot key={value}>permalink

Les slots peuvent être rendus zéro ou plusieurs fois, et peuvent passer des valeurs en retour au parent en utilisant des props. Le parent expose ces valeurs au template de slot avec la directive let:.

Il est possible d'utiliser la syntaxe raccourcie usuelle — let:item est équivalent à let:item={item}, et <slot {item}> est équivalent à <slot item={item}>.

<!-- FancyList.svelte -->
<ul>
	{#each items as item}
		<li class="fancy">
			<slot prop={item}></slot>
		</li>
	{/each}
</ul>

<!-- App.svelte -->
<FancyList {items} let:prop={thing}>
	<div>{thing.text}</div>
</FancyList>

Les slots nommés peuvent aussi exposer des valeurs. La directive let: ira sur l'élément avec l'attribut slot correspondant.

<!-- FancyList.svelte -->
<ul>
	{#each items as item}
		<li class="fancy">
			<slot name="item" {item}></slot>
		</li>
	{/each}
</ul>

<slot name="footer"></slot>

<!-- App.svelte -->
<FancyList {items}>
	<div slot="item" let:item>{item.text}</div>
	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>

<svelte:self>permalink

L'élément <svelte:self> permet à un composant de s'inclure lui-même, récursivement.

Cet élément ne peut pas être utilisé à la racine du markup ; il doit être placé à l'intérieur d'un bloc {#if} ou {#each} ou passé à un <slot> pour éviter une boucle infinie.

<script>
	export let count;
</script>

{#if count > 0}
	<p>compte à rebours ... {count}</p>
	<svelte:self count="{count - 1}"/>
{:else}
	<p>décollage !</p>
{/if}

<svelte:component>permalink

<svelte:component this={expression}/>

L'élément <svelte:component> rend un composant dynamiquement, en utilisant le constructeur du composant spécifié avec la propriété this. Quand cette propriété change, l'instance du composant est détruite et recréée.

Si la valeur de this est falsy, aucun composant n'est rendu.

<svelte:component this={currentSelection.component} foo={bar}/>

<svelte:element>permalink

<svelte:element this={expression}/>

L'élément <svelte:element> permet de rendre un élément d'un type spécifié dynamiquement. Cela peut servir par exemple pour afficher du contenu texte enrichi provenant d'un CMS. Toutes les propriétés et fonctions d'écoute d'évènements seront appliquées à l'élément.

Le seul type de liaison (binding) possible dans ce cas est bind:this, puisque les liaisons spécifiques créées par Svelte au moment de la compilation pour le type de l'élément (par ex. bind:value pour les éléments <input>) ne sont pas compatibles avec un type de balise dynamique.

Si this a une valeur nullish, l'élément et ses enfants ne seront pas rendus.

Si this a pour valeur le nom d'une balise vide (comme br), et des enfants ont été fournis à <svelte:element>, une erreur d'exécution sera levée en mode développement.

<script>
	let tag = 'div';
	export let handler;
</script>

<svelte:element this={tag} on:click={handler}>Foo</svelte:element>

<svelte:window>permalink

<svelte:window on:event={handler}/>

<svelte:window bind:prop={value}/>

L'élément <svelte:window> permet d'ajouter des fonctions d'écoute d'évènements à l'objet window sans avoir à penser à les supprimer quand le composant est détruit, ou sans avoir à vérifier l'existence de window lorsque l'on fait des rendus côté serveur.

À l'inverse de <svelte:self>, cet élément peut uniquement être placé à la racine du markup d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.

<script>
	function handleKeydown(event) {
		alert(`la touche ${event.key} a été enfoncée`);
	}
</script>

<svelte:window on:keydown={handleKeydown}/>

Vous pouvez aussi lier (avec bind:) les propriétés suivantes :

innerWidth
innerHeight
outerWidth
outerHeight
scrollX
scrollY
online — alias de window.navigator.onLine
devicePixelRatio

Toutes ces propriétés sont en lecture seule, à l'exception de scrollX and scrollY.

<svelte:window bind:scrollY={y}/>

Notez que la page ne défilera pas à la valeur fournie initialement pour des raisons d'accessibilité. Seuls les changements ultérieurs liés aux variables scrollX et scrollY déclencheront le défilement. Cependant, si un défilement initial est tout de même nécessaire, vous pouvez utiliser scrollTo() dans onMount().

<svelte:document>permalink

<svelte:document on:event={handler}/>

<svelte:document bind:prop={value}/>

À l'instar de <svelte:window>, cet élément vous permet d'ajouter des gestionnaires d'évènement sur document, comme visibilitychange, qui n'est pas déclenché sur window. Cet élément vous permet aussi d'utiliser des actions sur document.

Comme pour <svelte:window>, cet élément peut uniquement être utilisé à la racine du markup de votre composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.

<svelte:document
	on:visibilitychange={handleVisibilityChange}
	use:someAction
/>

Vous pouvez aussi lier (avec :bind) les propriétés suivantes:

fullscreenElement
visibilityState

Elles sont toutes en lecture seule.

<svelte:body>permalink

<svelte:body on:event={handler}/>

À l'instar de <svelte:window>, cet élément vous permet d'ajouter des fonctions d'écoute pour les évènements se produisant sur le document.body, comme mouseenter et mouseleave, qui ne se déclenchent pas sur window. Cela permet également d'utiliser des actions sur l'élément <body>.

Comme pour <svelte:window> et <svelte:document>, cet élément peut uniquement être placé à la racine du markup d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.

<svelte:body
	on:mouseenter={handleMouseenter}
	on:mouseleave={handleMouseleave}
	use:someAction
/>

<svelte:head>permalink

<svelte:head>...</svelte:head>

Cet élément rend possible l'insertion d'éléments dans document.head. Lors d'un rendu côté serveur, le contenu de head est exposé séparément du contenu html.

Comme pour <svelte:window>, <svelte:document> et <svelte:body>, cet élément peut uniquement être placé à la racine du markup d'un composant, et ne doit jamais être à l'intérieur d'un bloc de compilation ou d'un élément.

<svelte:head>
	<link rel="stylesheet" href="/tutorial/dark-theme.css">
</svelte:head>

<svelte:options>permalink

<svelte:options option={value}/>

L'élément <svelte:options> permet de fournir à un composant des options de compilation spécifiques, dont le détail est fourni dans la section Compilation. Les options disponibles sont:

immutable={true} — vous n'utilisez aucune donnée mutable, le compilateur peut donc se contenter d'effectuer des vérifications d'égalité par référence pour déterminer si des valeurs ont changé
immutable={false} — utilisé par défaut. Svelte sera plus conservatif pour vérifier si des objets mutables ont changé
accessors={true} — ajoute des getters et setters aux props d'un composant
accessors={false} — utilisé par défaut
namespace="..." — le namespace où ce composant sera utilisé, le plus souvent "svg" ; utilisez le namespace "foreign" pour désactiver l'insensibilité à la casse des noms d'attributs ainsi que les avertissements spécifiques au HTML
tag="..." — le nom à utiliser à la compilation de ce composant en web component

<svelte:options tag="my-custom-element"/>

<svelte:fragment>permalink

L'élément <svelte:fragment> permet de placer du contenu dans un slot nommé sans l'encadrer par un élément DOM supplémentaire. Cela permet de garder la structure de votre document intacte.

<!-- Widget.svelte -->
<div>
	<slot name="header">Aucun en-tête fourni</slot>
	<p>Du contenu entre l'en-tête et le bas de page</p>
	<slot name="footer"></slot>
</div>

<!-- App.svelte -->
<Widget>
	<HeaderComponent slot="header" />
	<svelte:fragment slot="footer">
		<p>Tous droits réservés.</p>
		<p>Copyright (c) 2019 Svelte Industries</p>
	</svelte:fragment>
</Widget>

précédent Directives de composant

suivant svelte