Component composition
18/09/2024 by zavos.dev
Hello there, fellow Svelte enthusiasts!
Component composition in Svelte allows developers to build reusable and flexible components
using slots.
By utilizing slots, you can create a parent component that serves as a wrapper, enabling child
components to fill specific areas with custom content. This approach promotes a clear separation
of concerns and enhances maintainability, as you can easily swap or modify the child components
without altering the parent structure.
Overall, component composition in Svelte fosters a modular architecture, making it easier to manage
complex applications.
Slots
Just like elements can have children so can components.
Before a component can accept children, though, it needs to know where to put them.
We do this with the <slot> element.
Card.svelte
<div class="card"> <slot></slot> </div>
+page.svelte
<Card> <span>Patrick BATEMAN</span> <span>Vice President</span> </Card>
Named slots
The previous example contained a default slot, which renders the direct children of a
component.
Sometimes you will need more control over placement. In those cases, we can use named
slots.
Card.svelte
<div class="card"> <header> <slot name="telephone" /> <slot name="company" /> </header> <slot /> <footer> <slot name="address" /> </footer> </div>
+page.svelte
<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>
Slots fallbacks
A component can specify fallbacks for any slots that are left empty, by putting content inside the Slot element.
Card.svelte
<div class="card"> <header> <slot name="telephone"> <i>(telephone)</i> </slot> <slot name="company"> <i>(company name)</i> </slot> </header> <slot> <i>(name)</i> </slot> <footer> <slot name="address"> <i>(address)</i> </slot> </footer> </div>
Slot props
Components can pass data back to their slotted content via slot props.
AliceBlue #f0f8ff rgb(240, 248, 255) hsl(208, 100%, 97%)
AntiqueWhite #faebd7 rgb(250, 235, 215) hsl(34, 78%, 91%)
Aqua #00ffff rgb(0, 255, 255) hsl(180, 100%, 50%)
Aquamarine #7fffd4 rgb(127, 255, 212) hsl(160, 100%, 75%)
Azure #f0ffff rgb(240, 255, 255) hsl(180, 100%, 97%)
Beige #f5f5dc rgb(245, 245, 220) hsl(60, 56%, 91%)
Bisque #ffe4c4 rgb(255, 228, 196) hsl(33, 100%, 88%)
Black #000000 rgb(0, 0, 0) hsl(0, 0%, 0%)
BlanchedAlmond #ffebcd rgb(255, 235, 205) hsl(36, 100%, 90%)
Blue #0000ff rgb(0, 0, 255) hsl(240, 100%, 50%)
BlueViolet #8a2be2 rgb(138, 43, 226) hsl(271, 76%, 53%)
Brown #a52a2a rgb(165, 42, 42) hsl(0, 59%, 41%)
BurlyWood #deb887 rgb(222, 184, 135) hsl(34, 57%, 70%)
CadetBlue #5f9ea0 rgb(95, 158, 160) hsl(182, 25%, 50%)
Chartreuse #7fff00 rgb(127, 255, 0) hsl(90, 100%, 50%)
Chocolate #d2691e rgb(210, 105, 30) hsl(25, 75%, 47%)
Coral #ff7f50 rgb(255, 127, 80) hsl(16, 100%, 66%)
CornflowerBlue #6495ed rgb(100, 149, 237) hsl(219, 79%, 66%)
Cornsilk #fff8dc rgb(255, 248, 220) hsl(48, 100%, 93%)
Crimson #dc143c rgb(220, 20, 60) hsl(348, 83%, 47%)
Cyan #00ffff rgb(0, 255, 255) hsl(180, 100%, 50%)
DarkBlue #00008b rgb(0, 0, 139) hsl(240, 100%, 27%)
DarkCyan #008b8b rgb(0, 139, 139) hsl(180, 100%, 27%)
DarkGoldenRod #b8860b rgb(184, 134, 11) hsl(43, 89%, 38%)
DarkGray #a9a9a9 rgb(169, 169, 169) hsl(0, 0%, 66%)
DarkGrey #a9a9a9 rgb(169, 169, 169) hsl(0, 0%, 66%)
DarkGreen #006400 rgb(0, 100, 0) hsl(120, 100%, 20%)
DarkKhaki #bdb76b rgb(189, 183, 107) hsl(56, 38%, 58%)
DarkMagenta #8b008b rgb(139, 0, 139) hsl(300, 100%, 27%)
DarkOliveGreen #556b2f rgb(85, 107, 47) hsl(82, 39%, 30%)
DarkOrange #ff8c00 rgb(255, 140, 0) hsl(33, 100%, 50%)
DarkOrchid #9932cc rgb(153, 50, 204) hsl(280, 61%, 50%)
DarkRed #8b0000 rgb(139, 0, 0) hsl(0, 100%, 27%)
DarkSalmon #e9967a rgb(233, 150, 122) hsl(15, 72%, 70%)
DarkSeaGreen #8fbc8f rgb(143, 188, 143) hsl(120, 25%, 65%)
DarkSlateBlue #483d8b rgb(72, 61, 139) hsl(248, 39%, 39%)
DarkSlateGray #2f4f4f rgb(47, 79, 79) hsl(180, 25%, 25%)
DarkSlateGrey #2f4f4f rgb(47, 79, 79) hsl(180, 25%, 25%)
DarkTurquoise #00ced1 rgb(0, 206, 209) hsl(181, 100%, 41%)
DarkViolet #9400d3 rgb(148, 0, 211) hsl(282, 100%, 41%)
DeepPink #ff1493 rgb(255, 20, 147) hsl(328, 100%, 54%)
DeepSkyBlue #00bfff rgb(0, 191, 255) hsl(195, 100%, 50%)
DimGray #696969 rgb(105, 105, 105) hsl(0, 0%, 41%)
DimGrey #696969 rgb(105, 105, 105) hsl(0, 0%, 41%)
DodgerBlue #1e90ff rgb(30, 144, 255) hsl(210, 100%, 56%)
FireBrick #b22222 rgb(178, 34, 34) hsl(0, 68%, 42%)
FloralWhite #fffaf0 rgb(255, 250, 240) hsl(40, 100%, 97%)
ForestGreen #228b22 rgb(34, 139, 34) hsl(120, 61%, 34%)
Fuchsia #ff00ff rgb(255, 0, 255) hsl(300, 100%, 50%)
Gainsboro #dcdcdc rgb(220, 220, 220) hsl(0, 0%, 86%)
GhostWhite #f8f8ff rgb(248, 248, 255) hsl(240, 100%, 99%)
Gold #ffd700 rgb(255, 215, 0) hsl(51, 100%, 50%)
GoldenRod #daa520 rgb(218, 165, 32) hsl(43, 74%, 49%)
Gray #808080 rgb(128, 128, 128) hsl(0, 0%, 50%)
Grey #808080 rgb(128, 128, 128) hsl(0, 0%, 50%)
Green #008000 rgb(0, 128, 0) hsl(120, 100%, 25%)
GreenYellow #adff2f rgb(173, 255, 47) hsl(84, 100%, 59%)
HoneyDew #f0fff0 rgb(240, 255, 240) hsl(120, 100%, 97%)
HotPink #ff69b4 rgb(255, 105, 180) hsl(330, 100%, 71%)
IndianRed #cd5c5c rgb(205, 92, 92) hsl(0, 53%, 58%)
Indigo #4b0082 rgb(75, 0, 130) hsl(275, 100%, 25%)
Ivory #fffff0 rgb(255, 255, 240) hsl(60, 100%, 97%)
Khaki #f0e68c rgb(240, 230, 140) hsl(54, 77%, 75%)
Lavender #e6e6fa rgb(230, 230, 250) hsl(240, 67%, 94%)
LavenderBlush #fff0f5 rgb(255, 240, 245) hsl(340, 100%, 97%)
LawnGreen #7cfc00 rgb(124, 252, 0) hsl(90, 100%, 49%)
LemonChiffon #fffacd rgb(255, 250, 205) hsl(54, 100%, 90%)
LightBlue #add8e6 rgb(173, 216, 230) hsl(195, 53%, 79%)
LightCoral #f08080 rgb(240, 128, 128) hsl(0, 79%, 72%)
LightCyan #e0ffff rgb(224, 255, 255) hsl(180, 100%, 94%)
LightGoldenRodYellow #fafad2 rgb(250, 250, 210) hsl(60, 80%, 90%)
LightGray #d3d3d3 rgb(211, 211, 211) hsl(0, 0%, 83%)
LightGrey #d3d3d3 rgb(211, 211, 211) hsl(0, 0%, 83%)
LightGreen #90ee90 rgb(144, 238, 144) hsl(120, 73%, 75%)
LightPink #ffb6c1 rgb(255, 182, 193) hsl(351, 100%, 86%)
LightSalmon #ffa07a rgb(255, 160, 122) hsl(17, 100%, 74%)
LightSeaGreen #20b2aa rgb(32, 178, 170) hsl(177, 70%, 41%)
LightSkyBlue #87cefa rgb(135, 206, 250) hsl(203, 92%, 75%)
LightSlateGray #778899 rgb(119, 136, 153) hsl(210, 14%, 53%)
LightSlateGrey #778899 rgb(119, 136, 153) hsl(210, 14%, 53%)
LightSteelBlue #b0c4de rgb(176, 196, 222) hsl(214, 41%, 78%)
LightYellow #ffffe0 rgb(255, 255, 224) hsl(60, 100%, 94%)
Lime #00ff00 rgb(0, 255, 0) hsl(120, 100%, 50%)
LimeGreen #32cd32 rgb(50, 205, 50) hsl(120, 61%, 50%)
Linen #faf0e6 rgb(250, 240, 230) hsl(30, 67%, 94%)
Magenta #ff00ff rgb(255, 0, 255) hsl(300, 100%, 50%)
Maroon #800000 rgb(128, 0, 0) hsl(0, 100%, 25%)
MediumAquaMarine #66cdaa rgb(102, 205, 170) hsl(160, 51%, 60%)
MediumBlue #0000cd rgb(0, 0, 205) hsl(240, 100%, 40%)
MediumOrchid #ba55d3 rgb(186, 85, 211) hsl(288, 59%, 58%)
MediumPurple #9370db rgb(147, 112, 219) hsl(260, 60%, 65%)
MediumSeaGreen #3cb371 rgb(60, 179, 113) hsl(147, 50%, 47%)
MediumSlateBlue #7b68ee rgb(123, 104, 238) hsl(249, 80%, 67%)
MediumSpringGreen #00fa9a rgb(0, 250, 154) hsl(157, 100%, 49%)
MediumTurquoise #48d1cc rgb(72, 209, 204) hsl(178, 60%, 55%)
MediumVioletRed #c71585 rgb(199, 21, 133) hsl(322, 81%, 43%)
MidnightBlue #191970 rgb(25, 25, 112) hsl(240, 64%, 27%)
MintCream #f5fffa rgb(245, 255, 250) hsl(150, 100%, 98%)
MistyRose #ffe4e1 rgb(255, 228, 225) hsl(6, 100%, 94%)
Moccasin #ffe4b5 rgb(255, 228, 181) hsl(38, 100%, 85%)
NavajoWhite #ffdead rgb(255, 222, 173) hsl(36, 100%, 84%)
Navy #000080 rgb(0, 0, 128) hsl(240, 100%, 25%)
OldLace #fdf5e6 rgb(253, 245, 230) hsl(39, 85%, 95%)
Olive #808000 rgb(128, 128, 0) hsl(60, 100%, 25%)
OliveDrab #6b8e23 rgb(107, 142, 35) hsl(80, 60%, 35%)
Orange #ffa500 rgb(255, 165, 0) hsl(39, 100%, 50%)
OrangeRed #ff4500 rgb(255, 69, 0) hsl(16, 100%, 50%)
Orchid #da70d6 rgb(218, 112, 214) hsl(302, 59%, 65%)
PaleGoldenRod #eee8aa rgb(238, 232, 170) hsl(55, 67%, 80%)
PaleGreen #98fb98 rgb(152, 251, 152) hsl(120, 93%, 79%)
PaleTurquoise #afeeee rgb(175, 238, 238) hsl(180, 65%, 81%)
PaleVioletRed #db7093 rgb(219, 112, 147) hsl(340, 60%, 65%)
PapayaWhip #ffefd5 rgb(255, 239, 213) hsl(37, 100%, 92%)
PeachPuff #ffdab9 rgb(255, 218, 185) hsl(28, 100%, 86%)
Peru #cd853f rgb(205, 133, 63) hsl(30, 59%, 53%)
Pink #ffc0cb rgb(255, 192, 203) hsl(350, 100%, 88%)
Plum #dda0dd rgb(221, 160, 221) hsl(300, 47%, 75%)
PowderBlue #b0e0e6 rgb(176, 224, 230) hsl(187, 52%, 80%)
Purple #800080 rgb(128, 0, 128) hsl(300, 100%, 25%)
RebeccaPurple #663399 rgb(102, 51, 153) hsl(270, 50%, 40%)
Red #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%)
RosyBrown #bc8f8f rgb(188, 143, 143) hsl(0, 25%, 65%)
RoyalBlue #4169e1 rgb(65, 105, 225) hsl(225, 73%, 57%)
SaddleBrown #8b4513 rgb(139, 69, 19) hsl(25, 76%, 31%)
Salmon #fa8072 rgb(250, 128, 114) hsl(6, 93%, 71%)
SandyBrown #f4a460 rgb(244, 164, 96) hsl(28, 87%, 67%)
SeaGreen #2e8b57 rgb(46, 139, 87) hsl(146, 50%, 36%)
SeaShell #fff5ee rgb(255, 245, 238) hsl(25, 100%, 97%)
Sienna #a0522d rgb(160, 82, 45) hsl(19, 56%, 40%)
Silver #c0c0c0 rgb(192, 192, 192) hsl(0, 0%, 75%)
SkyBlue #87ceeb rgb(135, 206, 235) hsl(197, 71%, 73%)
SlateBlue #6a5acd rgb(106, 90, 205) hsl(248, 53%, 58%)
SlateGray #708090 rgb(112, 128, 144) hsl(210, 13%, 50%)
SlateGrey #708090 rgb(112, 128, 144) hsl(210, 13%, 50%)
Snow #fffafa rgb(255, 250, 250) hsl(0, 100%, 99%)
SpringGreen #00ff7f rgb(0, 255, 127) hsl(150, 100%, 50%)
SteelBlue #4682b4 rgb(70, 130, 180) hsl(207, 44%, 49%)
Tan #d2b48c rgb(210, 180, 140) hsl(34, 44%, 69%)
Teal #008080 rgb(0, 128, 128) hsl(180, 100%, 25%)
Thistle #d8bfd8 rgb(216, 191, 216) hsl(300, 24%, 80%)
Tomato #ff6347 rgb(255, 99, 71) hsl(9, 100%, 64%)
Turquoise #40e0d0 rgb(64, 224, 208) hsl(174, 72%, 56%)
Violet #ee82ee rgb(238, 130, 238) hsl(300, 76%, 72%)
Wheat #f5deb3 rgb(245, 222, 179) hsl(39, 77%, 83%)
White #ffffff rgb(255, 255, 255) hsl(0, 0%, 100%)
WhiteSmoke #f5f5f5 rgb(245, 245, 245) hsl(0, 0%, 96%)
Yellow #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
YellowGreen #9acd32 rgb(154, 205, 50) hsl(80, 61%, 50%)
FilterableList.svelte
<div class="content">
{#each data.filter(matches) as item}
<slot {item}></slot>
{/each}
</div>
As in other contexts, {item} is shorthand for item={item}.
+page.svelte
<FilterableList
data={colors}
field="name"
let:item={row}
>