diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 024aafde14..2f86202a34 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -467,6 +467,12 @@ export default function dom(
}
if (options.customElement) {
+
+ let init_props = x`@attribute_to_object(this.attributes)`;
+ if (uses_slots) {
+ init_props = x`{ ...${init_props}, $$slots: @get_custom_elements_slots(this) }`;
+ }
+
const declaration = b`
class ${name} extends @SvelteElement {
constructor(options) {
@@ -474,7 +480,7 @@ export default function dom(
${css.code && b`this.shadowRoot.innerHTML = \`\`;`}
- @init(this, { target: this.shadowRoot, props: @attribute_to_object(this.attributes) }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
+ @init(this, { target: this.shadowRoot, props: ${init_props} }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
${dev_props_check}
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index ad06d6ff08..91e575ebf6 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -361,10 +361,18 @@ export class HtmlTag {
}
}
-export function attribute_to_object(attributes) {
+export function attribute_to_object(attributes: NamedNodeMap) {
const result = {};
for (const attribute of attributes) {
result[attribute.name] = attribute.value;
}
return result;
}
+
+export function get_custom_elements_slots(element: HTMLElement) {
+ const result = {};
+ element.childNodes.forEach((node: Element) => {
+ result[node.slot || 'default'] = true;
+ });
+ return result;
+}
diff --git a/test/custom-elements/samples/$$slot/main.svelte b/test/custom-elements/samples/$$slot/main.svelte
new file mode 100644
index 0000000000..05e1ac3284
--- /dev/null
+++ b/test/custom-elements/samples/$$slot/main.svelte
@@ -0,0 +1,31 @@
+
+
+
$$slots: {toString($$slots)}
+{#if $$slots.b} +Slot b is not available
+{/if} \ No newline at end of file diff --git a/test/custom-elements/samples/$$slot/test.js b/test/custom-elements/samples/$$slot/test.js new file mode 100644 index 0000000000..567e93f509 --- /dev/null +++ b/test/custom-elements/samples/$$slot/test.js @@ -0,0 +1,28 @@ +import * as assert from 'assert'; +import './main.svelte'; + +export default function (target) { + target.innerHTML = ` +$$slots: {"a":true,"default":true}
+Slot b is not available
+ `); + + assert.htmlEqual(b.shadowRoot.innerHTML, ` +$$slots: {"a":true,"b":true,"default":true}
+