diff --git a/package-lock.json b/package-lock.json
index 4a45a6e5fdcf..95ee3f0198e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/compiler/compile/index.ts b/src/compiler/compile/index.ts
index ac52f59471c8..a53512d7cd27 100644
--- a/src/compiler/compile/index.ts
+++ b/src/compiler/compile/index.ts
@@ -22,6 +22,7 @@ const valid_options = [
 	'hydratable',
 	'legacy',
 	'customElement',
+	'shadowDom',
 	'tag',
 	'css',
 	'loopGuardTimeout',
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 3d966f8765b0..625f69c49fb1 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -426,14 +426,19 @@ export default function dom(
 	}
 
 	if (options.customElement) {
+		const lightDom = options.shadowDom === 'none';
 		const declaration = b`
 			class ${name} extends @SvelteElement {
 				constructor(options) {
 					super();
+					
+					${!lightDom && b`
+						this.attachShadow({ mode: '${options.shadowDom}' });
+					`}
 
 					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
 
-					@init(this, { target: this.shadowRoot }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
+					@init(this, { target: ${lightDom ? 'this' : 'this.shadowRoot'} }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
 
 					${dev_props_check}
 
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
index e7362b9313ea..239a3df7cdb7 100644
--- a/src/compiler/interfaces.ts
+++ b/src/compiler/interfaces.ts
@@ -119,6 +119,7 @@ export interface CompileOptions {
 	hydratable?: boolean;
 	legacy?: boolean;
 	customElement?: boolean;
+	shadowDom?: ShadowDomMode;
 	tag?: string;
 	css?: boolean;
 	loopGuardTimeout?: number;
@@ -160,4 +161,8 @@ export interface Var {
 	hoistable?: boolean;
 	subscribable?: boolean;
 	is_reactive_dependency?: boolean;
-}
\ No newline at end of file
+}
+
+export type ShadowDomMode = 'none'
+	| 'open'
+	| 'closed'
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index c1d2f80101b1..476603fa8490 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -166,7 +166,6 @@ if (typeof HTMLElement === 'function') {
 		$$: T$$;
 		constructor() {
 			super();
-			this.attachShadow({ mode: 'open' });
 		}
 
 		connectedCallback() {