diff --git a/.eslintrc.js b/.eslintrc.js
index 946a157e40c8..752db4472a2f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -66,6 +66,7 @@ module.exports = {
'svelte/internal',
'svelte/store',
'svelte/easing',
+ 'svelte/slot',
'estree'
],
'svelte3/compiler': require('./compiler')
diff --git a/.gitignore b/.gitignore
index 7a1424492996..a47ff9e59b1c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ node_modules
/motion
/transition
/animate
+/slot
/scratch/
/coverage/
/coverage.lcov
diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index c75ec694d932..bfbb31ab79ec 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -881,6 +881,7 @@ The following initialisation options can be provided:
| `props` | `{}` | An object of properties to supply to the component
| `hydrate` | `false` | See below
| `intro` | `false` | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes
+| `slots` | `{}` | An object with keys - slot names, values - element or array of elements
Existing children of `target` are left where they are.
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 10588a08046b..c553547bd548 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -101,6 +101,9 @@ export function init(component, options, instance, create_fragment, not_equal, p
set_current_component(component);
const prop_values = options.props || {};
+ if (options.slots) {
+ prop_values.$$slots = options.slots;
+ }
const $$: T$$ = component.$$ = {
fragment: null,
diff --git a/src/runtime/slot/index.ts b/src/runtime/slot/index.ts
new file mode 100644
index 000000000000..37e526083bb5
--- /dev/null
+++ b/src/runtime/slot/index.ts
@@ -0,0 +1,32 @@
+import { noop, insert, detach } from 'svelte/internal';
+
+function create_root_slot_fn(elements) {
+ return function () {
+ return {
+ c: noop,
+
+ m: function mount(target, anchor) {
+ elements.forEach(element => {
+ insert(target, element, anchor);
+ });
+ },
+
+ d: function destroy(detaching) {
+ if (detaching) {
+ elements.forEach(detach);
+ }
+ },
+
+ l: noop,
+ };
+ };
+}
+
+export function createSlot(input) {
+ var key, tmp, slots={};
+ for (key in input) {
+ tmp = input[key];
+ slots[key] = [create_root_slot_fn(Array.isArray(tmp) ? tmp : [tmp])];
+ }
+ return slots;
+}
diff --git a/test/js/samples/root-component-slot/expected.js b/test/js/samples/root-component-slot/expected.js
new file mode 100644
index 000000000000..1b689aaff8a1
--- /dev/null
+++ b/test/js/samples/root-component-slot/expected.js
@@ -0,0 +1,97 @@
+/* generated by Svelte vX.Y.Z */
+import {
+ SvelteComponent,
+ append,
+ create_slot,
+ detach,
+ element,
+ get_slot_changes,
+ get_slot_context,
+ init,
+ insert,
+ safe_not_equal,
+ space,
+ transition_in,
+ transition_out
+} from "svelte/internal";
+
+const get_slot1_slot_changes = dirty => ({});
+const get_slot1_slot_context = ctx => ({});
+
+function create_fragment(ctx) {
+ let div;
+ let t;
+ let current;
+ const default_slot_template = /*$$slots*/ ctx[1].default;
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[0], null);
+ const slot1_slot_template = /*$$slots*/ ctx[1].slot1;
+ const slot1_slot = create_slot(slot1_slot_template, ctx, /*$$scope*/ ctx[0], get_slot1_slot_context);
+
+ return {
+ c() {
+ div = element("div");
+ if (default_slot) default_slot.c();
+ t = space();
+ if (slot1_slot) slot1_slot.c();
+ },
+ m(target, anchor) {
+ insert(target, div, anchor);
+
+ if (default_slot) {
+ default_slot.m(div, null);
+ }
+
+ append(div, t);
+
+ if (slot1_slot) {
+ slot1_slot.m(div, null);
+ }
+
+ current = true;
+ },
+ p(ctx, [dirty]) {
+ if (default_slot && default_slot.p && dirty & /*$$scope*/ 1) {
+ default_slot.p(get_slot_context(default_slot_template, ctx, /*$$scope*/ ctx[0], null), get_slot_changes(default_slot_template, /*$$scope*/ ctx[0], dirty, null));
+ }
+
+ if (slot1_slot && slot1_slot.p && dirty & /*$$scope*/ 1) {
+ slot1_slot.p(get_slot_context(slot1_slot_template, ctx, /*$$scope*/ ctx[0], get_slot1_slot_context), get_slot_changes(slot1_slot_template, /*$$scope*/ ctx[0], dirty, get_slot1_slot_changes));
+ }
+ },
+ i(local) {
+ if (current) return;
+ transition_in(default_slot, local);
+ transition_in(slot1_slot, local);
+ current = true;
+ },
+ o(local) {
+ transition_out(default_slot, local);
+ transition_out(slot1_slot, local);
+ current = false;
+ },
+ d(detaching) {
+ if (detaching) detach(div);
+ if (default_slot) default_slot.d(detaching);
+ if (slot1_slot) slot1_slot.d(detaching);
+ }
+ };
+}
+
+function instance($$self, $$props, $$invalidate) {
+ let { $$slots = {}, $$scope } = $$props;
+
+ $$self.$set = $$props => {
+ if ("$$scope" in $$props) $$invalidate(0, $$scope = $$props.$$scope);
+ };
+
+ return [$$scope, $$slots];
+}
+
+class Component extends SvelteComponent {
+ constructor(options) {
+ super();
+ init(this, options, instance, create_fragment, safe_not_equal, {});
+ }
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/root-component-slot/input.svelte b/test/js/samples/root-component-slot/input.svelte
new file mode 100644
index 000000000000..0507e5c658b8
--- /dev/null
+++ b/test/js/samples/root-component-slot/input.svelte
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/test/runtime/index.js b/test/runtime/index.js
index f070eb818551..c16cdecc0b08 100644
--- a/test/runtime/index.js
+++ b/test/runtime/index.js
@@ -159,12 +159,13 @@ describe("runtime", () => {
warnings.push(warning);
};
+ const configOptions = typeof config.options === 'function' ? config.options(window) : config.options;
const options = Object.assign({}, {
target,
hydrate,
props: config.props,
intro: config.intro
- }, config.options || {});
+ }, configOptions || {});
const component = new SvelteComponent(options);
diff --git a/test/runtime/samples/root-component-slot/_config.js b/test/runtime/samples/root-component-slot/_config.js
new file mode 100644
index 000000000000..7305b6d5af8e
--- /dev/null
+++ b/test/runtime/samples/root-component-slot/_config.js
@@ -0,0 +1,50 @@
+import { createSlot } from 'svelte/slot';
+
+export default {
+ options(window) {
+ const default_el = window.document.createElement('div');
+ default_el.innerHTML = 'default slot custom content';
+ const my_slot_el1 = window.document.createElement('div');
+ my_slot_el1.innerHTML = 'first my slot element';
+ const my_slot_el2 = window.document.createElement('div');
+ my_slot_el2.innerHTML = 'second my slot element';
+ const my_slot_els = [my_slot_el1, my_slot_el2];
+ const another_slot_el = window.document.createTextNode('another slot');
+ const conditional_slot_el = window.document.createElement('div');
+ conditional_slot_el.innerHTML = 'conditional slot';
+ return {
+ slots: createSlot({
+ default: default_el,
+ 'my-slot': my_slot_els,
+ 'another-slot-with-content': another_slot_el,
+ 'conditional-slot': conditional_slot_el,
+ }),
+ };
+ },
+
+ test({ assert, component, target }) {
+ assert.htmlEqual(target.innerHTML, `
+ default slot: default slot custom content
+ named slot: first my slot element
second my slot element
+ slot with default content: default content
+ another slot with content: another slot
+ conditional slot: conditional slot
+ conditional slot with content: default content`);
+
+ component.is_slot_visible = false;
+ assert.htmlEqual(target.innerHTML, `
+ default slot: default slot custom content
+ named slot: first my slot element
second my slot element
+ slot with default content: default content
+ another slot with content: another slot`);
+
+ component.is_slot_visible = true;
+ assert.htmlEqual(target.innerHTML, `
+ default slot: default slot custom content
+ named slot: first my slot element
second my slot element
+ slot with default content: default content
+ another slot with content: another slot
+ conditional slot: conditional slot
+ conditional slot with content: default content`);
+ }
+};
diff --git a/test/runtime/samples/root-component-slot/main.svelte b/test/runtime/samples/root-component-slot/main.svelte
new file mode 100644
index 000000000000..3b1b010fce56
--- /dev/null
+++ b/test/runtime/samples/root-component-slot/main.svelte
@@ -0,0 +1,11 @@
+default slot:
+named slot:
+slot with default content: default content
+another slot with content: default content
+{#if is_slot_visible}
+ conditional slot:
+ conditional slot with content: default content
+{/if}
+