svelte/documentation/tutorial/14-composition/04-optional-slots/app-a/App.svelte

<script>
	import Project from './Project.svelte';
	import Comment from './Comment.svelte';
</script>

<h1>Projects</h1>

<ul>
	<li>
		<Project title="Add TypeScript support" tasksCompleted={25} totalTasks={57}>
			<div slot="comments">
				<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
					<p>Those interface tests are now passing.</p>
				</Comment>
			</div>
		</Project>
	</li>
	<li>
		<Project title="Update documentation" tasksCompleted={18} totalTasks={21} />
	</li>
</ul>

<style>
	h1 {
		font-weight: 300;
		margin: 0 1rem;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0.5rem;
		display: flex;
	}

	@media (max-width: 600px) {
		ul {
			flex-direction: column;
		}
	}

	li {
		padding: 0.5rem;
		flex: 1 1 50%;
		min-width: 200px;
	}
</style>