diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index 976e78cea5f3..a4a986089f0c 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -855,6 +855,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/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 504b5ffe05f0..9bf0876b0bf7 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -436,11 +436,21 @@ export default function dom(
} else {
const superclass = options.dev ? 'SvelteComponentDev' : 'SvelteComponent';
+ let slots_block = '';
+ if (component.slots.size > 0) {
+ slots_block = '\n' + deindent`
+ if (options.slots) {
+ options.props = options.props || {};
+ options.props.$$scope = {};
+ options.props.$$slots = @create_root_component_slots(options.slots);
+ }`;
+ }
+
builder.add_block(deindent`
class ${name} extends @${superclass} {
constructor(options) {
super(${options.dev && `options`});
- ${should_add_css && `if (!@_document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`}
+ ${should_add_css && `if (!@_document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`}${slots_block}
@init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names});
${options.dev && `@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name}", options, id: create_fragment.name });`}
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index ae80ae38c1f3..bb908e1ba680 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -1,7 +1,7 @@
import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
import { current_component, set_current_component } from './lifecycle';
import { blank_object, is_function, run, run_all, noop } from './utils';
-import { children } from './dom';
+import { children, insert, detach } from './dom';
import { transition_in } from './transitions';
// eslint-disable-next-line @typescript-eslint/class-name-casing
@@ -197,3 +197,37 @@ export class SvelteComponent {
// overridden by instance, if it has props
}
}
+
+function create_root_component_slot_fn(elements) {
+ return function create_root_component_slot() {
+ return {
+ c: noop,
+
+ m: function mount(target, anchor) {
+ elements.forEach(element => {
+ insert(target, element, anchor);
+ });
+ },
+
+ d: function destroy(detaching) {
+ if (detaching) {
+ elements.forEach(element => detach(element));
+ }
+ },
+
+ l: noop,
+ };
+ };
+}
+
+export function create_root_component_slots(slots) {
+ const root_component_slots = {};
+ for (const slot_name in slots) {
+ let elements = slots[slot_name];
+ if (!Array.isArray(elements)) {
+ elements = [elements];
+ }
+ root_component_slots[slot_name] = [create_root_component_slot_fn(elements)];
+ }
+ return root_component_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..82c56b453f28
--- /dev/null
+++ b/test/js/samples/root-component-slot/expected.js
@@ -0,0 +1,126 @@
+/* generated by Svelte vX.Y.Z */
+import {
+ SvelteComponent,
+ append,
+ create_root_component_slots,
+ 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 = () => ({});
+const get_slot1_slot_context = () => ({});
+
+function create_fragment(ctx) {
+ var div, t, current;
+
+ const default_slot_template = ctx.$$slots.default;
+ const default_slot = create_slot(default_slot_template, ctx, null);
+
+ const slot1_slot_template = ctx.$$slots.slot1;
+ const slot1_slot = create_slot(slot1_slot_template, ctx, get_slot1_slot_context);
+
+ return {
+ c() {
+ div = element("div");
+
+ if (default_slot) default_slot.c();
+ t = space();
+
+ if (slot1_slot) slot1_slot.c();
+ },
+
+ l(nodes) {
+ if (default_slot) default_slot.l(div_nodes);
+
+ if (slot1_slot) slot1_slot.l(div_nodes);
+ },
+
+ 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(changed, ctx) {
+ if (default_slot && default_slot.p && changed.$$scope) {
+ default_slot.p(
+ get_slot_changes(default_slot_template, ctx, changed, null),
+ get_slot_context(default_slot_template, ctx, null)
+ );
+ }
+
+ if (slot1_slot && slot1_slot.p && changed.$$scope) {
+ slot1_slot.p(
+ get_slot_changes(slot1_slot_template, ctx, changed, get_slot1_slot_changes),
+ get_slot_context(slot1_slot_template, ctx, get_slot1_slot_context)
+ );
+ }
+ },
+
+ 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('$$scope', $$scope = $$props.$$scope);
+ };
+
+ return { $$slots, $$scope };
+}
+
+class Component extends SvelteComponent {
+ constructor(options) {
+ super();
+ if (options.slots) {
+ options.props = options.props || {};
+ options.props.$$scope = {};
+ options.props.$$slots = create_root_component_slots(options.slots);
+ }
+ init(this, options, instance, create_fragment, safe_not_equal, []);
+ }
+}
+
+export default Component;
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 880e316e0c57..487d774527b6 100644
--- a/test/runtime/index.js
+++ b/test/runtime/index.js
@@ -133,12 +133,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..d8f1b2ea3086
--- /dev/null
+++ b/test/runtime/samples/root-component-slot/_config.js
@@ -0,0 +1,48 @@
+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: {
+ 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}
+