svelte slot 的介紹

svelte slot 是在說明完html的事件以及變數綁定還有fetch和promise還有await之後要說明的，為什麼這個 slot 這麼重要，因為它可以讓元件開發更便利，廢話不多說先讓大家看看他的威力。

本文同步放置於此

內容介紹

相信讀者們常會有遇到，有很多html都很相同，但是又需要客製化一些部分，但是又不確定有哪些地方需要客製化，所以在開發上很不容易把共同的地方抽象出來。所以這時html就有slot這個標籤的出現，但是當然不時所有的瀏覽器都支援這功能，更別提舊版本的瀏覽器。那slot這功能的特點在哪裡呢?大家可以看看slot介紹，不過簡單講就是把html的原件下的子節點內嵌到元件內，這樣描述應該大家會聽得很模糊，所以大家看一下下列的例子，這時需要有兩個元件
如下所示。

svelte slot 的實作

首先是App.svelte的相關內容，主要是使用到後面的Box.svelte並在其下面有定義html的子節點。

<script>
	import Box from './Box.svelte';
</script>

<Box>
    <h2>Hello!</h2>
    <p>This is a box. It can contain anything.</p>
</Box>

接下來就是Box.svelte的相關內容，這邊定義了相關的css樣式，但是重點在於slot這個html標籤，因為在App.svelte裡面定義的Box子節點會直接放到slot這個html標籤的位置，所以說這個Box.svelte可以很簡單的覆用，只要將先關的html放在其子節點就可以了。

<style>
	.box {
		width: 300px;
		border: 1px solid #aaa;
		border-radius: 2px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
		padding: 1em;
		margin: 0 0 1em 0;
	}
</style>

<div class="box">
    <slot></slot>
</div>

如何設定預設值

當然大家會想要直接使用Box.svelte這元件，所以這時候就會想說有沒有設定預設值的方式，這裡只要將上面的例子修改成下列內容即可。

<style>
	.box {
		width: 300px;
		border: 1px solid #aaa;
		border-radius: 2px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
		padding: 1em;
		margin: 0 0 1em 0;
	}
</style>

<div class="box">
    <slot>
        <em>no content was provided</em>
    </slot>
</div>

這時只要使用Box.svelte時沒有子節點就會直接顯示預設的內容。

小結

在介紹完基本的svelte的html功能後要開始進入進階的內容了，今天跟大家介紹slot，但是今天的slot只是初步的介紹大家如何使用，待明日在更進一步介紹slot的進階內容。