svelte:component, svelte:head, svelte:head

app

<script>
	import Product from './Product.svelte';
	import CartItem from './CartItem.svelte';
	import FamilyNode from './FamilyNode.svelte';

	let y;

	$: console.log(y);

	let currentTitle = 'my app';

	let familyStructure = [
		{
			isParent: true,
			name: 'son',
			children: [
				{ isParent: false, name: 'son1' },
				{
					isParent: true,
					name: 'son2',
					children: [
						{ isParent: false, name: 'son3' },
						{ isParent: false, name: 'son4' },
					],
				},
			],
		},
		{ isParent: false, name: 'son' },
	];

	let showProduct = true;

	let renderComponent = { cmp: Product, title: 'text', id: 'p1' };

	const toggle = () => {
		showProduct = !showProduct;

		if (renderComponent.cmp === Product) {
			renderComponent.cmp = {
				cmp: CartItem,
				title: 'test',
				id: 'p2',
			};
		} else {
			renderComponent.cmp = {
				cmp: Product,
				title: 'text',
				id: 'p1',
			};
		}
	};

	const changeTitle = () => {
		currentTitle = 'change Title';
	};
</script>

<style>
	div {
		height: 3000px;
	}
</style>

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

<svelte:head>
	<title>{currentTitle}</title>
</svelte:head>
<svelte:body on:mouseenter />

<button on:click="{changeTitle}">change title</button>

<div>
	<button on:click="{toggle}">toggle</button>

	<svelte:component
		this="{renderComponent.cmp}"
		title="{renderComponent.title}"
		id="{renderComponent.id}"
	/>

	<!-- {#if showProduct}
        <Product title="text" id="p1" />
    {:else}
        <CartItem title="cart" id="p2" />
    {/if} -->

	{#each familyStructure as item}
		<FamilyNode member="{item}" />
	{/each}
</div>

child

<script context="module">
	console.log('한번만');

	let degree;
</script>

<script>
	export let member;
	console.log('실행');

	let isActive;

	const degreeActive = () => {
		isActive = false;
	};

	const setActive = () => {
		if (degree) {
			degree();
		}
		isActive = true;

		degree = degreeActive;
	};
</script>

<style>
	div {
		margin-left: 2rem;
	}

	.active {
		color: red;
	}
</style>

<div on:click="{setActive}" class:active="{isActive}">
	<h1>{member.name}</h1>

	{#if member.isParent}
		{#each member.children as child}
			<svelte:self member="{child}" />
		{/each}
	{/if}
</div>

컴퍼넌트 생성시 같은 구조로 작성될때 데이터값으로 매칭하여 작성

svelte:head, svelte:body , svelte:window 등 스벨트 자체 내에서 접근 가능