diff --git a/text/0000-better-slots.md b/text/0000-better-slots.md new file mode 100644 index 0000000..b310024 --- /dev/null +++ b/text/0000-better-slots.md @@ -0,0 +1,161 @@ +- Start Date: 2020-09-27 +- RFC PR: (leave this empty) +- Svelte Issue: (leave this empty) + +# Better Slots and Component Compositon + +## Summary + +This RFC aims to provide a better way to create nested components and improve component composition using slots. This also aims to provide a more *svelte* like syntax for creating slots. + +**Input** +```html +
+ + Default Content + +
+ + This is the default slot. + +``` +**Component** +```html + + Some Content + + +``` +**Output** +```html +
+ Some Content + +
+This is the default slot. +``` + +## Motivation + +The current way of using slots is very simple but also does not have many features such as: + +1. If you want a named slot to have no parent node. +This is only possible if you use the default slot. There is no way to exclude the `p` element from the slot. +```html + +``` +```html +

+``` + +2. There is no way to directly slot a svelte component +Svelte components have to be wrapped in a node element such as a `span` or a `div` to be slotted. +```html + +``` +```html + + + +``` +These problems pose a major problem for component composition and styling (especially with the new flexbox system which almost everyone is using). +This RFC aims to solve all these problems and add some new features along the way. + +## Detailed design + +### Basic Composition +This is not so different from the current implementation, replacing the `slot` tag with the `svelte:slot` tag aims to join all the components used by svelte ( _svelte:\*_ ) and not part of the native list. + +**Slots.svelte** +```html +
+ + This is the default content for the default slot. + +
+ + Default content for named slot. + +``` + +**Component.svelte** +```html + + + Hello There + + Named Slot + + +``` + +**Output** +```html +
+ Hello There +
+ + Named Slot + +``` + +### Slot Props + +**Slots.svelte** +```html + + +{#each ['fizz', 'buzz', 'foo', 'bar'] as i} + + This is the default content for the default slot. + +{/each} +``` + +**Component.svelte** +```html + + + Hello There + + {add(word, 'world!')} + + +``` + +**Output** +```html +Hello There +fizz world! +buzz world! +foo world! +bar world! +``` + +## How we teach this + +- Much changes to the documentation will not be needed as `slot` will be renamed to `svelte:slot` and `svelte:fragment` will be used instead of `` but users must be informed of this name change and the slight change in functionality. +- Component authors must change thier `` to `` and add a wrapper node to named slots as one will not be present by default. +- This should be easy to teach as it is very similar to the existing implementation. + +## Drawbacks + +- Would break existing components unless backwards compatibility is offered. +- Would be best if merged in a major release. + +## Alternatives + +This problem has no alternative. + +## Unresolved questions + +- Is there a better name for `svelte:fragment`? +