Ví dụ trước dùng slot mặc định để hiển thị các phần tử con trực tiếp của component. Đôi khi bạn sẽ cần nhiều kiểm soát hơn về vị trí đặt. Trong những trường hợp đó, chúng ta có thể sử dụng slot được đặt tên.
Bên trong App.svelte, chúng ta đang hiển thị một component <Card> chứa <span slot="telephone"> và các thành phần khác cho company và address. Hãy thêm các slot được đặt tên tương ứng trong Card.svelte:
<div class="card">
<header>
<slot name="telephone"></slot>
<slot name="company"></slot>
</header>
<slot></slot>
<footer>
<slot name="address"></slot>
</footer>
</div>Chúng ta cần thêm một số style cho phần tử <small> trong App.svelte để nó chiếm một dòng riêng. Nội dung của <Card> kế thừa style từ Card.svelte, như font-family (những chữ cái được gọi là 'Silian Rail'), nhưng các quy tắc phổ thông vẫn áp dụng — chúng ta cần thêm kiểu vào App.svelte vì đó là nơi chứa phần tử đó:
<style>
main {
display: grid;
place-items: center;
height: 100%;
background: url(./wood.svg);
}
small {
display: block;
font-size: 0.6em;
text-align: right;
}
</style>Hoặc, chúng ta có thể sử dụng bộ chỉnh :global bên trong Card.svelte để chọn tất cả các phần tử small bên trong .card:
<style>
/* ... */
.card :global(small) {
display: block;
font-size: 0.6em;
text-align: right;
}
</style><script>
import Card from './Card.svelte';
</script>
<main>
<Card>
<span>Patrick BATEMAN</span>
<span>Vice President</span>
<span slot="telephone">212 555 6342</span>
<span slot="company">
Pierce & Pierce
<small>Mergers and Aquisitions</small>
</span>
<span slot="address">358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
</Card>
</main>
<style>
main {display: grid;
place-items: center;
height: 100%;
background: url(./wood.svg);
}
</style>