diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 3dfb4fd275..f621a137e2 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -160,6 +160,9 @@ export default class Component {
}
this.tag = this.component_options.tag || compile_options.tag;
this.compile_options.shadowDom = this.component_options.shadowdom || "open";
+ if(this.compile_options.shadowDom === "none"){
+ // handle slots here?
+ }
} else {
this.tag = this.name.name;
}
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index f8fbcf8ced..f64df23f55 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -165,11 +165,14 @@ export let SvelteElement;
if (typeof HTMLElement === 'function') {
SvelteElement = class extends HTMLElement {
$$: T$$;
+ private _content;
constructor() {
super();
+ this._copycontent()
}
connectedCallback() {
+ this._slotcontent()
// @ts-ignore todo: improve typings
for (const key in this.$$.slotted) {
// @ts-ignore todo: improve typings
@@ -177,6 +180,24 @@ if (typeof HTMLElement === 'function') {
}
}
+ _copycontent(){
+ if(this.children){
+ this._content = document.createElement("div")
+ while(this.childNodes.length > 0){
+ this._content.appendChild(this.childNodes[0])
+ }
+ }
+ }
+
+ _slotcontent(){
+ if(this._content){
+ const slot = this.querySelector("slot")
+ while(this._content.childNodes.length > 0){
+ slot.appendChild(this._content.childNodes[0])
+ }
+ }
+ }
+
attributeChangedCallback(attr, _oldValue, newValue) {
this[attr] = newValue;
}
diff --git a/test/custom-elements/samples/shadowdom-none-slots/main.svelte b/test/custom-elements/samples/shadowdom-none-slots/main.svelte
new file mode 100644
index 0000000000..ebe2db4e2d
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none-slots/main.svelte
@@ -0,0 +1,11 @@
+
default fallback content
+foo fallback content
+