diff --git a/text/0000-slot-attribute.md b/text/0000-slot-attribute.md new file mode 100644 index 0000000..c1613d6 --- /dev/null +++ b/text/0000-slot-attribute.md @@ -0,0 +1,196 @@ +- Start Date: 2020-03-01 +- RFC PR: (leave this empty) +- Svelte Issue: (leave this empty) + +# Rules for slot attribute and `let:` directive + +## Summary + +This RFC propose rules for `slot` attribute and `let:` directive. + +## Motivation + +Currently, `slot` attribute and `let:` directive can be used freely, which causes some edge cases bugs like: [#4135](https://github.com/sveltejs/svelte/issues/4135). + +The following proposes some new rules for using `slot` and `let:` + +## Detailed design + +### 1. No nesting of `slot` attribute: + +Currently this is a valid syntax: + +```html + +
+
+
+
+
+ + +
+
+
+
+
+``` + +Should warn against nesting usage of `slot` attribute. + +### 2. Disallow more than 1 named slot of the same name + +Currently this is a valid syntax: + +```html + +
1
+
2
+
+``` + +The current behavior is to render both divs into the same named slot: + +```html + +
1
+
2
+ +``` + +The complication arise when using `let:` binding in this scenario + +```html + +
{a}
+
{b}
+
+``` + +[REPL](https://svelte.dev/repl/b714180a1feb44f7be6348d75374d689?version=3.19.1). + +Currently both `div`s are currently created by the same fragment, sharing the same slot scope. This lead to cases with bugs due to conflicting slot scope: + +```html + +
b: {a} a: {b}
+
a: {a} b: {b}
+
+``` +[REPL](https://svelte.dev/repl/af6949665963491e94732fa5590f0810?version=3.19.1) + +So, 1 quick way of eliminating such edge cases is to disallow declaring mutliple same named slot. + +As a workaround for the need of having more than 1 root nodes for the same slot, we can introduce the `` as a wrapper: + +```html + + +
{a}
+
{b}
+
+
+``` + +### 3. Disallow `slot="default"` + +Currently we allow +```html + +
1
+
+``` + +which is equivalent to + +```html + +
1
+
+``` + +However, + +```html + +
1
+
2
+
+``` + +is valid, but + +```html + +
1
+
2
+
+ + + +
1
+
2
+
+``` + +will violate rule #2, so, an easier way out is to disallow `slot="default"`. + +### 4. `let:` binding can only be used in Component or element with `slot` attribute + +Currently, `let:` binding can be used anywhere, creating new slot scopes but actually has no effect. + +```html + +
+
+ {a} {b} {c} +
+
+
+``` + +[REPL](https://svelte.dev/repl/bd54399c10704b5ca1e414f307593fdd?version=3.19.1) + +It is arguably a bug, so we should disallow it. + +With this, it is invalid to use `let:` for default slot + +```html + +
{a}
+
+``` + +and should use the following instead: + +```html + +
{a}
+
+ + + + + +
{a}
+
+
+``` + +## How we teach this + +The current slot behaviors create edge cases which can be prevented with the rules proposed. + +We should provide meaningful compile errors to prevent them. + +## Drawbacks + +- + +## Alternatives + +- + +## Unresolved questions + +TBD? \ No newline at end of file