特殊元素

在 GitHub 上編輯此頁面

<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 在子元素中會為真。

<!-- 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}>永久連結

插槽可以呈現零次或多次，並使用道具將值傳遞回父層。父層使用 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>永久連結

<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} />

<svelte:component> 元素使用指定為 this 屬性的元件建構函式，動態呈現元件。當屬性變更時，元件會被銷毀並重新建立。

如果 this 為假值，則不會呈現任何元件。

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

<svelte:element>永久連結

<svelte:element this={expression} />

<svelte:element> 元素讓您可以呈現動態指定類型的一個元素。例如，當從 CMS 顯示豐富文字內容時，這很有用。任何屬性與事件監聽器都會套用至元素。

唯一支援的繫結是 bind:this，因為 Svelte 在建置時所做的元素類型特定繫結（例如輸入元素的 bind:value）無法與動態標籤類型搭配使用。

如果 this 具有 nullish 值，則元素及其子元素不會被呈現。

如果 this 是 空元素 的名稱（例如 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} />

<svelte:window> 元素允許您將事件監聽器新增至 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，其他都是唯讀的。

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

請注意，為了避免無障礙問題，頁面不會捲動至初始值。只有 scrollX 和 scrollY 的繫結變數後續變更才會導致捲動。不過，如果需要捲動行為，請在 onMount() 中呼叫 scrollTo()。

<svelte:document>永久連結

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

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

與 <svelte:window> 類似，此元素允許您將監聽器新增至 document 上的事件，例如 visibilitychange，此事件不會在 window 上觸發。它也讓您可以在 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 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} />

<svelte:options> 元素提供一個地方來指定每個元件的編譯器選項，這些選項在 編譯器區段 中有詳細說明。可能的選項為

• immutable={true} — 您從不使用可變資料，因此編譯器可以執行簡單的參考相等性檢查，以確定值是否已變更
• immutable={false} — 預設值。Svelte 會更保守地判斷可變物件是否已變更
• accessors={true} — 為元件的屬性新增 getter 和 setter
• accessors={false} — 預設值
• namespace="..." — 此元件將使用的命名空間，最常見的是「svg」；使用「foreign」命名空間來退出不區分大小寫的屬性名稱和特定於 HTML 的警告
• customElement="..." — 編譯此元件為自訂元素時要使用的名稱

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

<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>