Svelte) Special elements

 

- slot

<slot><!-- optional fallback --></slot>

<slot name="x"><!-- optional fallback --></slot>

<slot prop={value} />

: 컴포넌트는 요소와 마찬가지로 자식 콘텐츠를 가질 수 있습니다. 콘텐츠는 <slot> 요소를 사용하여 자식 컴포넌트에서 노출되며, 자식이 제공되지 않을 경우 렌더링되는 대체 콘텐츠를 포함할 수 있습니다.

<!-- Widget.svelte -->
<div>
	<slot>
		this fallback content will be rendered when no content is provided, like in the first example
	</slot>
</div>

<!-- App.svelte -->
<Widget />
<!-- this component will render the default content -->

<Widget>
	<p>this is some child content that will overwrite the default slot content</p>
</Widget>

* 일반적인 <slot> 요소를 렌더링하려면 <svelte:element this="slot" />을 사용할 수 있습니다.

 

- `slot name="name"`

: 이름이 지정된 슬롯을 사용하면 소비자가 특정 영역을 대상으로 할 수 있습니다. 또한 대체 콘텐츠를 가질 수도 있습니다.

<!-- Widget.svelte -->
<div>
	<slot name="header">No header was provided</slot>
	<p>Some content between header and footer</p>
	<slot name="footer" />
</div>

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

 

: 컴포넌트는 <Component slot="name" /> 구문을 사용하여 이름이 지정된 슬롯에 배치할 수 있습니다. 래퍼 요소를 사용하지 않고 슬롯에 콘텐츠를 배치하려면 특수 요소 svelte:fragment를 사용할 수 있습니다.

<!-- Widget.svelte -->
<div>
	<slot name="header">No header was provided</slot>
	<p>Some content between header and footer</p>
	<slot name="footer" />
</div>

<!-- App.svelte -->
<Widget>
	<HeaderComponent slot="header" />
	<svelte:fragment slot="footer">
		<p>All rights reserved.</p>
		<p>Copyright (c) 2019 Svelte Industries</p>
	</svelte:fragment>
</Widget>

 

 

- $$slots

: $$slots는 부모로부터 컴포넌트에 전달된 슬롯의 이름을 키로 가지는 객체입니다. 부모가 특정 이름의 슬롯을 전달하지 않으면 해당 이름은 $$slots에 포함되지 않습니다. 이를 통해 컴포넌트는 부모가 제공하는 경우에만 슬롯(및 스타일링을 위한 래퍼와 같은 다른 요소)을 렌더링할 수 있습니다.

* 명시적으로 빈 이름이 지정된 슬롯을 전달하면 해당 슬롯의 이름이 $$slots에 추가됩니다. 예를 들어, 부모가 <div slot="title" />을 자식 컴포넌트에 전달하면 자식 컴포넌트 내에서 $$slots.title은 참(true)이 됩니다.

<!-- Card.svelte -->
<div>
	<slot name="title" />
	{#if $$slots.description}
		<!-- This <hr> and slot will render only if a slot named "description" is provided. -->
		<hr />
		<slot name="description" />
	{/if}
</div>

<!-- App.svelte -->
<Card>
	<h1 slot="title">Blog Post Title</h1>
	<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
</Card>

 

 

- slot key={value}

: 슬롯은 0개 이상의 횟수로 렌더링될 수 있으며, props를 사용하여 값을 부모에게 전달할 수 있습니다. 부모는 let: 지시자를 사용하여 값을 슬롯 템플릿에 노출시킵니다.

: 일반적인 줄임 표기 규칙이 적용됩니다 - let:item은 let:item={item}과 동일하며, <slot {item}>은 <slot item={item}>과 동일합니다.

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

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

: 이름이 지정된 슬롯은 값도 노출할 수 있습니다. let: 지시자는 slot 속성이 있는 요소에 사용됩니다.

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

<slot name="footer" />

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

 

 

- svelte:self

: 컴포넌트가 자기 자신을 재귀적으로 포함할 수 있게 해줍니다.

: 이 요소는 마크업의 최상위 레벨에 나타날 수 없으며, 무한 루프를 방지하기 위해 if나 each 블록 내부에 있어야 하거나 컴포넌트의 슬롯에 전달되어야 합니다.

<script>
	/** @type {number} */
	export let count;
</script>

{#if count > 0}
	<p>counting down... {count}</p>
	<svelte:self count={count - 1} />
{:else}
	<p>lift-off!</p>
{/if}

 

 

- svelte:component

<svelte:component this={expression} />

: 동적으로 컴포넌트를 렌더링하는데 사용됩니다. this 속성으로 지정된 컴포넌트 생성자를 사용합니다. 속성이 변경되면 컴포넌트가 파괴되고 재생성됩니다. 만약 이 속성이 falsy한 값이라면 컴포넌트는 렌더링되지 않습니다.

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

 

 

- svelte:element

<svelte:element this={expression} />

: 동적으로 지정된 타입의 요소를 렌더링하는데 사용됩니다. 이는 예를 들어 CMS에서 풍부한 텍스트 콘텐츠를 표시할 때 유용합니다. 속성과 이벤트 리스너가 적용됩니다.

: 지원되는 바인딩은 bind:this 뿐이며, Svelte가 빌드 타임에 수행하는 요소 타입별 바인딩(bind:value 등)은 동적 태그 타입과 함께 작동하지 않습니다.

: 만약 이 속성이 nullish한 값을 가지고 있다면 요소와 그 자식들은 렌더링되지 않습니다.

: 만약 이 속성이 void 요소의 이름(예: br)이고 svelte:element에 자식 요소가 있다면 개발 모드에서 런타임 오류가 발생합니다.

<script>
	let tag = 'div';

	export let handler;
</script>

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

 

 

- svelte:window

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

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

: 컴포넌트가 파괴될 때 이벤트 리스너를 제거하거나 서버 사이드 렌더링 시 window의 존재를 확인하는 것을 걱정하지 않고 window 객체에 이벤트 리스너를 추가할 수 있게 해줍니다.

: svelte:self와 달리, 이 요소는 컴포넌트의 최상위 레벨에만 나타날 수 있으며 블록이나 요소 내부에 있어서는 안 됩니다.

<script>
	/** @param {KeyboardEvent} event */
	function handleKeydown(event) {
		alert(`pressed the ${event.key} key`);
	}
</script>

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

다음 속성에 바인딩할 수도 있습니다:

innerWidth
innerHeight
outerWidth
outerHeight
scrollX
scrollY
online — window.navigator.onLine의 별칭
devicePixelRatio

: scrollX와 scrollY를 제외한 모든 속성은 읽기 전용입니다.

* 참고로, 초기 값으로 페이지가 스크롤되지 않도록 하기 위해 초기값으로 스크롤되지 않습니다. scrollX와 scrollY의 바인딩 변수에 대한 후속 변경만 스크롤링을 발생시킵니다. 그러나 스크롤링 동작이 원하는 경우 onMount()에서 scrollTo()를 호출하면 됩니다.

 

 

- svelte:document

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

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

: svelte:window와 마찬가지로, 이 요소를 사용하면 window에서 발생하지 않는 visibilitychange와 같은 document의 이벤트에 대한 리스너를 추가할 수 있습니다. 또한 document에서 액션을 사용할 수도 있습니다.

: <svelte:window>와 마찬가지로, 이 요소는 컴포넌트의 최상위 레벨에만 나타날 수 있으며 블록이나 요소 내부에 있어서는 안 됩니다.

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

 

다음 속성에 바인딩할 수도 있습니다:

fullscreenElement
visibilityState

모두 읽기 전용입니다.

 

- svelte:body

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

: svelte:window와 유사하게 document.body에서 발생하는 이벤트에 대한 리스너를 추가할 수 있습니다. 예를 들어 mouseenter와 mouseleave와 같은 이벤트는 window에서 발생하지 않습니다. 또한 <body> 요소에서 액션을 사용할 수도 있습니다.

: svelte:window, svelte:document, svelte:body와 마찬가지로, 이 요소는 컴포넌트의 최상위 레벨에만 나타날 수 있으며 블록이나 요소 내부에 있어서는 안 됩니다.

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

 

 

- svelte:head

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

: 이 요소를 사용하면 document.head에 요소를 삽입할 수 있습니다. 서버 사이드 렌더링 중에는 head 콘텐츠가 별도로 주요 HTML 콘텐츠와 분리되어 노출됩니다.

: svelte:window, svelte:document, svelte:body와 마찬가지로, 이 요소는 컴포넌트의 최상위 레벨에만 나타날 수 있으며 블록이나 요소 내부에 있어서는 안 됩니다.

<svelte:head>
	<title>Hello world!</title>
	<meta name="description" content="This is where the description goes for SEO" />
</svelte:head>

 

 

- svelte:options

<svelte:options option={value} />

: 컴포넌트별 컴파일러 옵션을 지정할 수 있는 공간을 제공합니다. 이 옵션들은 컴파일러 섹션에서 자세히 설명되어 있습니다. 가능한 옵션은 다음과 같습니다:

immutable={true} — 변경 가능한 데이터를 사용하지 않으므로 컴파일러는 값이 변경되었는지 간단한 참조 동등성 검사를 수행할 수 있습니다.
immutable={false} — 기본값입니다. Svelte는 변경 가능한 객체가 변경되었는지 여부에 대해 보수적으로 판단합니다. accessors={true} — 컴포넌트의 props에 대한 getter와 setter를 추가합니다.
accessors={false} — 기본값입니다.
namespace="..." — 이 컴포넌트가 사용될 네임스페이스를 지정합니다. 가장 일반적으로 "svg"입니다. 대소문자를 구분하지 않는 속성 이름과 HTML에 특정한 경고를 사용하지 않으려면 "foreign" 네임스페이스를 사용하세요. customElement="..." — 이 컴포넌트를 컴파일할 때 사용할 이름입니다.

 

 

- svelte:fragment

: <svelte:fragment> 요소는 컨테이너 DOM 요소에 감싸지 않고도 이름이 지정된 슬롯에 콘텐츠를 배치할 수 있게 해줍니다. 이를 통해 문서의 플로우 레이아웃을 유지할 수 있습니다.

<!-- Widget.svelte -->
<div>
	<slot name="header">No header was provided</slot>
	<p>Some content between header and footer</p>
	<slot name="footer" />
</div>

<!-- App.svelte -->
<Widget>
	<h1 slot="header">Hello</h1>
	<svelte:fragment slot="footer">
		<p>All rights reserved.</p>
		<p>Copyright (c) 2019 Svelte Industries</p>
	</svelte:fragment>
</Widget>

 

 

 

Reference) 위 내용은 Svelte 공식 문서의 내용을 번역한 내용입니다.

Special elements • Docs • Svelte